New Ways Of Responsive Design in Tailwind CSS
summary
Shows concrete Tailwind techniques: use max- prefixes to target only up to a breakpoint (replace mobile-only overrides), stack responsive variants for ranged breakpoints, and use arbitrary min/max pixel variants for one-offs. Demonstrates CSS columns for balanced testimonials and a small utility (a grid-auto-fit plugin) that emits repeat(autofit, minmax(16rem, 1fr)) so grids auto-fit columns. Covers Tailwind container queries via @container with named containers and advises using svh (not dvh) for stable full‑screen heroes to avoid jumpy scrolling.
AI-written summary · about
chapters (13)
- 0:00Introduction and speaker intro
- 1:26About the speaker and projects
- 2:33Why CSS is hard and Tailwind’s role
- 3:34Beyond basic responsive variants
- 3:57Max width responsive variant
- 7:14Stacking responsive variants
- 9:02Arbitrary value variants
- 10:06Multi-column layouts with Tailwind
- 13:36Grid auto-fit plugin
- 18:12Container queries in Tailwind
- 23:47Nested container queries
- 25:35Dynamic viewport units
- 29:50Summary and closing remarks
related talks
31mTailwind CSS: It looks awful, and it works
30mTailwind 4 vs CSS 6
37mHijacking CSS with tailwindCSS
31mTailwind or the Future of CSS
27mBuilding Design Components with Tailwind
32mThe Future of Utility-First CSS: What Tailwind v4 Signals for Web Development
35mModern CSS Replacements for Better Responsive Code
48mSmart Layout Patterns with Modern CSS