Tailwind CSS

Tailwind CSS is a utility-first CSS framework. You write styles in your markup using small, single-purpose class names like flex, pt-4, text-center, and rotate-90, and the framework generates exactly the CSS you used. This wiki documents the v4 codebase that implements that framework.

What this repository contains

This is the source repository for tailwindcss and its first-party adapters. It is a pnpm workspace (pnpm-workspace.yaml) plus a Cargo workspace (Cargo.toml). The TypeScript packages compile and emit CSS; the Rust crates scan source files and extract Tailwind class candidates. The two halves communicate through a NAPI-based Node addon.

The major pieces:

• packages/tailwindcss — the CSS compiler. Parses CSS, processes @import/@theme/@utility/@variant/@apply, registers the design system, and turns lists of class names into rules. See packages/tailwindcss.
• packages/@tailwindcss-cli — the tailwindcss command-line build tool. See @tailwindcss/cli.
• packages/@tailwindcss-vite, @tailwindcss-postcss, @tailwindcss-webpack — bundler integrations. See packages.
• packages/@tailwindcss-node — Node-only helpers shared between the CLI, Vite, PostCSS, and Webpack adapters (loading config/plugins via jiti, enhanced-resolve, source maps, optimization through lightningcss).
• packages/@tailwindcss-browser — a self-contained browser bundle that watches the DOM and rebuilds CSS on the fly.
• packages/@tailwindcss-upgrade — a one-shot npx @tailwindcss/upgrade migration tool that converts v3 codebases (and templates) to v4.
• packages/@tailwindcss-standalone — a Bun-built native binary version of the CLI with several official plugins bundled in.
• crates/oxide — the Rust scanner. Walks the file tree, respects .gitignore, and runs state-machine extractors over source text to find Tailwind class candidates. See oxide.
• crates/node — a NAPI binding that exposes the Rust Scanner to the TypeScript packages. Published as @tailwindcss/oxide.
• crates/ignore — a vendored, lightly-modified copy of the ignore crate used by oxide.
• crates/classification-macros — Rust proc-macros generating fast byte-classification tables used by the extractors.
• integrations/ — end-to-end integration tests that run real builds through Vite, PostCSS, Webpack, the CLI, and the upgrade tool.
• playgrounds/ — manual sandboxes (Vite, Next.js, and a v3-compatibility playground).

Who uses it

The tailwindcss npm package is one of the most-downloaded packages in the JavaScript ecosystem. The framework targets:

• Application developers who add a single @import "tailwindcss" to their stylesheet and pull in a Vite/PostCSS/Webpack plugin.
• Library/component authors who use @reference or @theme reference to access design tokens without emitting them.
• Design system teams who customize the generated theme via @theme blocks and @utility rules instead of a JavaScript config.

Quick links

• Architecture — how the compiler, scanner, and adapters fit together.
• Getting started — install, build, test, run.
• Glossary — utility, candidate, variant, design system, scanner, etc.
• Packages — every TypeScript package in the workspace.
• Crates — every Rust crate in the workspace.
• Features — cross-cutting capabilities (scanning, variants, source maps, v3 compatibility).
• How to contribute — workflow, testing, debugging.

Public documentation

This wiki documents the internals of the codebase. For end-user documentation — how to use Tailwind in an application — see tailwindcss.com.