What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides low-level, single-purpose classes—like flex, pt-4, text-center, and bg-blue-500—which you compose directly in your HTML or JSX to build custom designs without writing traditional CSS. Created by Adam Wathan, it was first released in November 2017 and reached its current major version, Tailwind CSS v4, in early 2025. Unlike component-based frameworks like Bootstrap, Tailwind doesn't ship pre-designed components; it gives you the primitives. The v4 release introduced a Rust-based engine (Oxide), dramatically faster build times, and native CSS-first configuration using @theme directives instead of tailwind.config.js. Production builds with PurgeCSS (now built in) typically yield CSS bundles under 10 KB gzipped. We've shipped Tailwind on 50+ client projects—it's our default for any Next.js or Astro site where design fidelity and performance both matter.

How it works

Tailwind scans your source files (HTML, JSX, Vue templates, MDX—anything you configure) for class names, then generates only the CSS for the utilities you actually use. This tree-shaking-by-default approach keeps output small.

A typical component looks like this:

<button className="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-150">
  Save changes
</button>

No separate CSS file. No naming conventions to debate. Each class maps to exactly one CSS declaration (or a small set).

Key mechanisms

JIT (Just-In-Time) compilation: Since v3 (2021), Tailwind generates styles on demand. Arbitrary values like w-[327px] or text-[#1a1a1a] work without config changes.
Responsive prefixes: md:flex, lg:grid-cols-3—breakpoint-specific styles inline.
State variants: hover:, focus:, dark:, group-hover:, etc., let you handle pseudo-classes and dark mode without media query boilerplate.
@theme directive (v4): Design tokens like colors, spacing, and fonts are defined in CSS using @theme { --color-primary: #4f46e5; }, replacing the old JavaScript config.
Oxide engine (v4): The new Rust-based scanner and compiler delivers 2-5x faster builds compared to v3's Node-based toolchain.

You install it via npm install tailwindcss and wire it into your build with PostCSS, Vite, or the Tailwind CLI.

When to use it

Tailwind fits specific project profiles well. Here's our honest take:

Use Tailwind when:

You're building a custom UI, not slapping on a pre-built theme
Your team values co-located styles (styles live next to markup)
You want strict design-token control across a large codebase
You're using a component framework (React, Vue, Svelte, Astro) where repetition is managed by components, not CSS classes
Performance is a priority—sub-10 KB CSS bundles are the norm

Skip Tailwind when:

You need a quick prototype with pre-built UI components (reach for shadcn/ui on top, or just use Chakra/MUI)
Your team has deep CSS expertise and prefers writing semantic stylesheets
You're maintaining a legacy codebase with heavy BEM or CSS Modules—migrating mid-project rarely pays off
The project is a simple static page where vanilla CSS is fine

The main trade-off is markup verbosity. Long class strings are real. Component extraction and editor tooling (the official Tailwind CSS IntelliSense VS Code extension) make it manageable.

Tailwind CSS vs alternatives

Feature	Tailwind CSS	Bootstrap 5	Vanilla CSS / BEM	CSS Modules
Approach	Utility-first	Component-first	Semantic / manual	Scoped classes
Bundle size (prod)	~3-10 KB gzip	~25-30 KB gzip	Varies	Varies
Design freedom	High	Constrained by theme	Unlimited	Unlimited
Learning curve	Moderate (class names)	Low	Low-medium	Low
Co-location	Yes (inline)	Partial	No (separate files)	Partial
Built-in dark mode	Yes (`dark:` variant)	Yes (v5.3+)	Manual	Manual
Design tokens	@theme / config	Sass variables	CSS custom properties	CSS custom properties

Tailwind and CSS Modules aren't mutually exclusive—you can use both. But in practice, once a team adopts Tailwind, CSS Modules become redundant. Compared to utility-first competitors like UnoCSS, Tailwind has the larger ecosystem, better docs, and broader IDE support, though UnoCSS offers faster builds in some configurations.

Real-world example

On a recent Astro 5 marketing site for a SaaS client, we used Tailwind CSS v4 with the @theme directive to define brand tokens—primary colors, type scale, and spacing—in a single theme.css file. Every component pulled from those tokens via classes like text-primary and gap-spacing-md. The final CSS output was 6.2 KB gzipped. Lighthouse performance scores consistently hit 98-100. Build times with the Oxide engine averaged 120ms for the full 47-page site. When the client rebranded six months later, updating the color palette meant changing 8 lines in theme.css—zero component files touched. That's the payoff of utility-first done right.

Frequently asked questions about Tailwind CSS

Is Tailwind CSS the same as utility-first CSS?

Not exactly. Utility-first CSS is a methodology—the idea of using small, single-purpose classes instead of semantic class names. Tailwind CSS is the most popular framework that implements this methodology. You can write utility-first CSS by hand or use alternatives like UnoCSS or Windi CSS (now deprecated). Tailwind just gives you a well-designed, documented, and tooled set of utility classes with a config system, responsive variants, and a build pipeline. Saying 'Tailwind' when you mean 'utility-first CSS' is like saying 'React' when you mean 'component-based UI'—close, but not the same thing.

When did Tailwind CSS become an industry standard?

Tailwind crossed into mainstream adoption around 2020-2021. The v2 release in November 2020 added dark mode support and an extended color palette. The v3 release in December 2021 introduced JIT compilation as the default, which eliminated most build-time complaints. By the 2022 State of CSS survey, Tailwind had the highest satisfaction rating among CSS frameworks. The v4 release in January 2025, with its Rust-based Oxide engine and CSS-first configuration, cemented it as the default choice for new projects in the React, Vue, and Astro ecosystems. As of April 2026, it has over 85,000 GitHub stars and ships in most major starter templates.

What's the best alternative to Tailwind CSS?

It depends on what you dislike about Tailwind. If you want a similar utility-first approach but faster builds and more flexibility, UnoCSS (by Anthony Fu) is the strongest alternative—it's engine-first and framework-agnostic. If you want pre-built components out of the box, Bootstrap 5 or Chakra UI are better fits. If you dislike inline class verbosity entirely, CSS Modules or vanilla CSS with BEM naming keep styles in separate files. For teams already using Tailwind but wanting accessible components, shadcn/ui provides copy-paste React components built on Tailwind + Radix primitives. Our preferred stack at Social Animal is Tailwind v4 with shadcn/ui for any React or Next.js project.

Does Tailwind CSS hurt performance or increase HTML file size?

The CSS bundle is tiny—typically under 10 KB gzipped in production—because Tailwind only generates classes you actually use. HTML file size does increase due to longer class attributes, but HTML compresses extremely well with gzip/Brotli since utility class names repeat frequently across elements. In practice, the combined transfer size (HTML + CSS) of a Tailwind project is almost always smaller than a project with a traditional CSS framework. We've measured this across dozens of builds. The real performance concern isn't file size—it's ensuring you don't disable tree-shaking by dynamically constructing class names (e.g., `text-${color}-500`), which Tailwind can't detect at build time.