CSS Frameworks

Tailwind CSS94.2k★

If you write HTML and CSS, Tailwind flips the usual approach: instead of writing CSS 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. 94K stars, 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.

UnoCSS18.7k★

If you use Tailwind CSS and wish it was faster and more flexible, UnoCSS is an on-demand atomic CSS engine that generates only the utility classes your code actually uses — and it does it at build time with near-zero overhead. Same utility-first approach as Tailwind, but the engine is fundamentally different: regex-based extraction, instant HMR, and a preset system that can emulate Tailwind, Windi CSS, Bootstrap, or your own custom utilities. 18K stars, TypeScript, growing at +25/week. The speed difference is measurable — UnoCSS generates CSS in milliseconds where Tailwind's JIT takes longer on large projects. The preset architecture means you're not locked into one utility naming convention. Want Tailwind classes? Use the Tailwind preset. Want something custom? Write a preset in a few lines. Fully free. No paid tier, no cloud service, no premium presets. MIT-equivalent license. Solo to large teams: free. Drop it into Vite, Webpack, Nuxt, Astro, or SvelteKit. The Tailwind compat preset means migration from Tailwind is possible without rewriting your templates. The catch: UnoCSS has a smaller ecosystem than Tailwind. Component libraries like shadcn, DaisyUI, and Flowbite are built for Tailwind specifically. The Tailwind preset covers most classes but edge cases will break. If your team relies on Tailwind's documentation and component ecosystem, switching has a real cost beyond the CSS engine itself.