The Real Reason Everyone's Fighting About Tailwind CSS v4
The Tailwind CSS4 debate is everywhere right now. And honestly? Most people are arguing about the wrong thing. The real question isn't "inline styles vs. utility classes" — it's about where your styling decisions live and who pays the cognitive cost. Let me break down what's actually happening, with real code, real trade-offs, and a clear take at the end. What Changed in Tailwind CSS v4 Tailwind CSS v4 introduced a major shift: CSS-first configuration. Instead of a tailwind.config.js , you define everything in your CSS file using @theme : /* Before (v3) - tailwind.config.js */ module .exports = { theme : { extend : { colors : { brand : '#6366f1' , } , spacing : { 18: '4.5rem', } } } } /* After (v4) - main.css */ @import "tailwindcss" ; @theme { --color-brand : #6366f1 ; --spacing-18 : 4.5rem ; } This is cleaner for many workflows. But it's not what's causing the drama. The Real Flashpoint: Utility Density in JSX What's actually triggering the discourse is how v4 accelerates a pattern that was already polarizing — components that look like this: // The "inline styles but make it Tailwind" pattern function AlertBanner ({ type , message }) { return ( < div className = { ` flex items-center gap-3 px-4 py-3 rounded-lg border ${ type === ' error ' ? ' bg-red-50 border-red-200 text-red-800 ' : ' bg-blue-50 border-blue-200 text-blue-800 ' } ` } > < span className = "text-sm font-medium" > { message } </ span > </ div > ); } vs. the @apply approach many teams prefer: /* alert.css */ .alert { @apply flex items-center gap-3 px-4 py-3 rounded-lg border; } .alert--error { @apply bg-red-50 border-red-200 text-red-800; } .alert--info { @apply bg-blue-50 border-blue-200 text-blue-800; } // Cleaner component function AlertBanner ({ type , message }) { return ( < div className = { `alert alert-- ${ type } ` } > < span className = "text-sm font-medium" > { message } </ span > </ div > ); } Both work. Neither is objectively wrong. But they encode very different philosophies. The Philos