Getting Started with Tailwind CSS v4

CSS-First Configuration

Tailwind v4 moves configuration out of tailwind.config.js and into your CSS via @theme blocks. This means your design tokens live right next to the styles that use them.

@theme {
  --color-primary: oklch(0.21 0.006 285);
  --font-sans: 'Inter', sans-serif;
}

Performance

The new Oxide engine is written in Rust and delivers build times that are 5-10x faster than v3 in most projects. Hot module replacement feels nearly instant.

Simplified Setup

With the @tailwindcss/vite plugin, setup is a single import — no PostCSS config needed. Just add the plugin to your Vite config and you're ready to go.

Migration

Most projects can migrate incrementally. The @tailwindcss/upgrade CLI handles the bulk of config-to-CSS conversion automatically.