Tailwind CSS

Tailwind flips the usual CSS approach: instead of writing classes in a separate file, you apply small utility classes directly in your markup. `class="flex items-center gap-4 bg-zinc-900 p-6 rounded-lg"`. That's your styling, right there in the HTML. No context-switching to a stylesheet.

MIT licensed, used by basically every modern frontend framework. Tailwind v4 rewrote the engine. It's faster, uses CSS-native features like cascade layers, and the config moved from JavaScript to CSS. The ecosystem is massive: Tailwind UI (paid component library), Headless UI (free accessible components), and thousands of community component libraries.

The framework itself is completely free. CLI, PostCSS plugin, Vite plugin. All free, all MIT licensed. No paid tier for the core framework. Tailwind UI is the paid product: $299 one-time for every component and template they've built. It's optional. You can build everything yourself or use free community alternatives like shadcn/ui or DaisyUI. Solo to large teams: the framework is free. Period. The question is whether to buy Tailwind UI to save design time, and at $299 one-time, the math works out immediately if it saves you even a day of work.

The catch: your HTML gets verbose. Long class strings are polarizing. Some developers love the co-location, others find it unreadable. And Tailwind is opinionated about design tokens. If your design system doesn't align with Tailwind's spacing/color scale, you'll fight the config.