Skip to main content

Tailwind CSS

What is Tailwind CSS​

Tailwind CSS is a utility-first CSS framework that lets you style elements directly in your markup using pre-defined utility classes. It is MIT licensed and currently at version 4.x, with ~49.7M weekly npm downloads and 94.1k GitHub stars. Version 4 is a ground-up rewrite introducing CSS-first configuration, automatic content detection, a built-in Vite plugin, zero-config startup, and 3.5× faster builds.

Why we recommend it​

  • Rapid prototyping — go from design to working UI without switching between HTML and CSS files.
  • Tiny production bundles — unused CSS is automatically purged, so you only ship what you use.
  • Customizable design system — extend or override the default theme via CSS variables (v4), keeping design tokens in one place.
  • No runtime overhead — styles are resolved at build time, avoiding the performance penalty of CSS-in-JS solutions.
  • Enormous ecosystem — shadcn/ui, Headless UI, Heroicons, and a wide range of community plugins provide ready-made building blocks.

When to use​

  • React, Next.js, or Vite projects where utility-class styling fits the workflow
  • Projects paired with shadcn/ui for a component layer on top of Tailwind
  • Design-system-driven projects that benefit from a constrained set of design tokens
  • Rapid prototyping where speed to a visual result matters

When NOT to use​

  • Teams that strongly prefer traditional CSS separation (BEM, CSS Modules)
  • Legacy projects already invested in a CSS-in-JS library (Styled Components, Emotion)
  • Codebases where inline utility classes are considered unacceptable by the team style guide
caution

Tailwind CSS v4 requires Node.js ≥ 20. The migration from v3 to v4 is non-trivial due to the new CSS-first configuration model. Review the v4 upgrade guide before upgrading existing projects.

Resources​