Getting Started with Tailwind CSS v4

Daniel Plomp

Daniel Plomp

— 1 min read

Getting Started with Tailwind CSS v4

Tailwind CSS v4 is a ground-up rewrite with a new high-performance engine written in Rust. It brings lightning-fast build times, a simplified configuration experience, and powerful new features. Let's explore what's changed and how to get started.

What's New in v4

  • 10x faster build times thanks to the Rust-based engine
  • CSS-first configuration — no more tailwind.config.js
  • Automatic content detection (no content array needed)
  • Built-in import support without postcss-import
  • New @theme directive for design tokens

Installation

Install Tailwind CSS v4 and the Vite plugin:

npm install tailwindcss @tailwindcss/vite

Add the plugin to your vite.config.ts:

import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [tailwindcss()],
});

CSS-First Configuration

The biggest change in v4 is moving configuration to CSS. Instead of a JavaScript config file, you customize Tailwind directly in your CSS:

@import 'tailwindcss';

@theme {
  --color-primary: #6366f1;
  --color-secondary: #ec4899;
  --font-sans: 'Inter', system-ui, sans-serif;
  --breakpoint-3xl: 1920px;
}

Info: Your existing tailwind.config.js still works — Tailwind v4 has a compatibility layer. But for new projects, CSS-first is the recommended approach.

Conclusion

Tailwind CSS v4 is the biggest upgrade in the framework's history. The performance improvements alone make it worth upgrading. Start new projects with v4 and plan your migration for existing ones.

Read more