Tailwind CSS: It looks awful, and it works
summary
Live-coding recreates a Figma testimonial card using Tailwind utilities only, showing exact classes for padding, radii, object-cover, and negative margins and proving the layout works. Demonstrations include group-hover for card-level hover effects, responsive CSS grid that becomes a mosaic at md/lg breakpoints, dark-mode gradient text via utility prefixes, extracting a reusable link class with @apply, and a data-loading spinner toggled by a single data attribute. All examples compile and behave as described.
AI-written summary · about
chapters (9)
- 0:00Introduction to Tailwind
- 2:58Styling the Profile Card
- 7:43Card Layout and Spacing
- 11:43Interactivity and States
- 13:29Reusability and Components
- 16:02Responsive Layout Design
- 19:19Dark Mode Implementation
- 21:06Dynamic Button States
- 25:01Dynamic Styling Techniques
related talks
27mBuilding Design Components with Tailwind
31mTailwind or the Future of CSS
36mNew Ways Of Responsive Design in Tailwind CSS
37mHijacking CSS with tailwindCSS
30mTailwind 4 vs CSS 6
21mWhat’s New in Tailwind CSS v4?
32mThe Future of Utility-First CSS: What Tailwind v4 Signals for Web Development
31mUnleashing designers with Tailwind