Tailwind CSS

4.2.2 · active · verified Sun Apr 19

Tailwind CSS is a highly popular, utility-first CSS framework designed for rapidly building custom user interfaces directly in your markup. The current stable release series is v4.2.2, which represents a significant architectural shift with a new, faster Rust-based engine (Oxide and Lightning CSS) for processing CSS. It has an active release cadence with frequent patch and minor updates. Key differentiators for v4 include its move towards a "CSS-first" configuration model, where customization is primarily handled within CSS files using `@theme` directives, and automatic content detection, simplifying the build process. Unlike previous versions, Tailwind CSS v4 no longer requires PostCSS for its core compilation, as it integrates its own CSS processing pipeline. Dedicated bundler plugins like `@tailwindcss/vite` and `@tailwindcss/webpack` are provided for seamless integration into modern build ecosystems, while still offering a PostCSS compatibility layer via `@tailwindcss/postcss` for existing setups. This version emphasizes performance, a smaller footprint, and leverages modern CSS features like native cascade layers and `color-mix()` for enhanced capabilities and developer experience.

Common errors

Warnings

Install

Imports

Quickstart

Demonstrates a basic setup for Tailwind CSS v4.2.2 using the new CSS-first configuration, `@tailwindcss/postcss` plugin, and the CLI to generate CSS. It includes custom theme variables defined via the `@theme` directive.

```typescript
// 1. Install necessary packages
// npm install -D tailwindcss @tailwindcss/postcss postcss

// 2. Create your main CSS file (e.g., src/input.css)
// This file now contains your Tailwind import and any CSS-first configurations.
// src/input.css
/*
@import 'tailwindcss';

@theme {
  --color-brand-500: oklch(0.68 0.28 274);
  --font-body: ui-sans-serif, system-ui, sans-serif;
  --space-xxs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
}
*/

// 3. Create a PostCSS configuration file (e.g., postcss.config.mjs)
// This registers Tailwind CSS v4 as a PostCSS plugin.
// postcss.config.mjs
import tailwindcss from '@tailwindcss/postcss';

export default {
  plugins: {
    tailwindcss: {},
  },
};

// 4. Create an HTML file (e.g., public/index.html)
// public/index.html
/*
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS v4 Quickstart</title>
  <link rel="stylesheet" href="/output.css">
</head>
<body>
  <h1 class="text-brand-500 font-bold text-5xl p-xs">Hello, Tailwind v4!</h1>
  <p class="text-body text-sm px-sm">This is a paragraph with custom theme colors and spacing.</p>
</body>
</html>
*/

// 5. Add a build script to your package.json
// The 'tailwindcss' command line tool processes your CSS.
// package.json
/*
{
  "name": "my-tailwind-app",
  "version": "1.0.0",
  "scripts": {
    "build:css": "tailwindcss -i ./src/input.css -o ./public/output.css --watch"
  },
  "devDependencies": {
    "tailwindcss": "^4.2.2",
    "@tailwindcss/postcss": "^4.2.2",
    "postcss": "^8.4.38"
  }
}
*/

// 6. Run the build command and open public/index.html
// npm run build:css
```

view raw JSON →