Utility-first CSS: The highs and lows of styling web sites
summary
Argues that a utility-first CSS workflow (Tailwind/Tachyons) lets teams ship with almost no hand-written CSS, using tools like TailwindCSS, PostCSS and Autoprefixer plus live-server and wget to iterate in HTML. Demonstrates rebuilding the conference page, adding a custom gradient utility, and using purge to shrink a default ~1.9 MB / 86k-line stylesheet down to about 14 KB for production, speeding development and reducing maintenance.
AI-written summary · about
chapters (6)
- 0:00Start
- 18:26HELPS AVOID CONTEXT SWITCHING
- 19:00MAINTAINABILITY
- 20:38COMMON COMPONENTS
- 21:49INLINING STYLES IS BAD
- 39:51LET'S CREATE A BUILD PIPELINE
related talks
45mA real-life journey into the opinionated world of 'utility-first' CSS
18mIn Defense of Utility-First CSS
32mThe Future of Utility-First CSS: What Tailwind v4 Signals for Web Development
37mHijacking CSS with tailwindCSS
31mTailwind or the Future of CSS
47mWeb Haute Couture: The Great CSS Catwalk
19mTangled in Tailwind: A love-hate story
28mClass 🥊Clash