Features
- Utility-first approach with composable classes
- JIT engine generates only used CSS
- Design tokens via configuration file
- Dark mode, responsive, and state variants
- Tailwind v4 with CSS-first configuration
Pros
- Rapid UI development without context-switching
- Consistent design system through constrained utilities
- Tiny production bundles — only ships used CSS
- Enormous ecosystem of plugins and component libraries
Cons
- HTML can become verbose with many utility classes
- Learning curve for the utility-class mental model
- Custom designs may fight the default spacing/color scales
Overview
Tailwind CSS is a utility-first CSS framework that provides low-level utility classes for building custom designs directly in your markup. Instead of writing custom CSS or using pre-built components, you compose designs using classes like flex, pt-4, text-center, and bg-blue-500.
Tailwind v4 introduced a CSS-first configuration approach where you configure your design system using CSS custom properties rather than a JavaScript config file. The JIT (just-in-time) engine generates only the CSS you actually use, resulting in tiny production bundles regardless of how many utilities are available.
When to Use
Tailwind CSS is the right choice when you want to build custom designs quickly without writing custom CSS, when you value design consistency through a constrained utility system, or when building component libraries and design systems. It pairs exceptionally well with component-based frameworks.
Getting Started
npm install tailwindcss @tailwindcss/vite<div class="flex items-center gap-4 rounded-lg bg-white p-6 shadow-lg">
<h2 class="text-xl font-bold text-gray-900">Hello, Tailwind!</h2>
<button class="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
Click me
</button>
</div>