| Product | Tailwind CSS |
| Website | tailwindcss.com |
| Category | CSS Framework |
| License | MIT |
| Pricing | Open source (Tailwind UI is paid) |
What Is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework. Instead of writing custom CSS classes like .card-header and defining their styles in a stylesheet, you compose designs directly in your HTML using utility classes: flex items-center gap-4 p-6 bg-white rounded-xl shadow-md. Each class does one thing, and you combine them to build any design.
The approach was controversial when Tailwind launched. “Isn’t this just inline styles?” was the common objection. In practice, it’s fundamentally different: utility classes are constrained to a design system (spacing scale, color palette, breakpoints), they support pseudo-states (hover:, focus:), responsive variants (md:, lg:), and dark mode (dark:). The JIT compiler generates only the CSS you use, so the production bundle is tiny.
Key Features
Design System Built In
Tailwind ships with a carefully designed set of defaults: a spacing scale (0, 0.5, 1, 1.5, 2, 2.5, 3...), a color palette (50-950 shades for every color), font sizes, border radii, shadows, and breakpoints. These defaults enforce visual consistency without you thinking about it.
Responsive and State Variants
Prefix any utility with a breakpoint (md:text-lg) or state (hover:bg-blue-600, focus:ring-2, dark:bg-gray-900). This is where Tailwind separates from inline styles: responsive design and interactive states compose naturally in the HTML.
JIT Compiler
Tailwind’s Just-in-Time compiler scans your templates and generates CSS on demand. Only the classes you actually use end up in the bundle. The production CSS for a typical site is under 10KB gzipped.
Customization
Extend or override the default theme in tailwind.config.js. Add custom colors, fonts, spacing values, or entirely new utilities. The config is the single source of truth for your design system.
Who Is This For?
- Frontend developers who want to build custom designs without writing custom CSS
- Teams that need design consistency across components and pages
- Anyone who finds CSS maintenance painful
- AI-assisted development (LLMs generate Tailwind markup very well)
Pros
- Build custom designs without custom CSS
- Design system enforces consistency
- Tiny production bundles (JIT compiler)
- Responsive and dark mode are first-class
- LLMs generate Tailwind markup accurately
- Massive ecosystem (Tailwind UI, Headless UI, community)
Cons
- Long class strings can be hard to read
- Learning the class names takes time
- Not for teams that want semantic CSS
- Can lead to inconsistency without discipline
- Tailwind UI (component library) is paid
Verdict
Tailwind CSS won the CSS framework debate. The developer experience — seeing your design change as you type class names, without switching between HTML and CSS files — is genuinely faster once you know the class vocabulary. The JIT compiler solved the bundle-size concern, and the ecosystem (Tailwind UI, Headless UI, shadcn/ui, Catalyst) provides production-quality components.
The only reason not to use Tailwind is if your team has a strong preference for semantic CSS or CSS-in-JS. Both are valid approaches. But for new projects, Tailwind is the default choice for a reason: it’s fast to write, consistent by default, and the tooling is excellent.