Getting Started with Tailwind CSS v4

Introduction

Tailwind CSS v4 introduces a CSS-first configuration approach, replacing the JavaScript-based configuration file. This shift makes Tailwind more aligned with the web platform.

Key Changes

No More tailwind.config.js

In v4, you configure everything directly in your CSS file:

@import "tailwindcss";
@import "tw-animate-css";
@plugin "@tailwindcss/typography";
 
@custom-variant dark (&:is(.dark *));
 
@theme inline {
  --color-primary: var(--primary);
  --color-secondary: var(--secondary);
}

OKLCH Color Space

Tailwind v4 uses OKLCH by default, which provides more accurate color interpolation:

:root {
  --primary: oklch(0.205 0.042 265.755);
  --secondary: oklch(0.965 0.001 286.375);
}

Container Queries

Built-in support for container queries:

<div class="@container">
  <div class="grid grid-cols-1 @md:grid-cols-2 @lg:grid-cols-3">
    <!-- Responsive grid based on container width -->
  </div>
</div>

Migration Tips

1. Remove tailwind.config.js and postcss.config.js
2. Use @theme inline instead of @theme for dark mode support
3. Replace tailwindcss-animate with tw-animate-css
4. Use @custom-variant dark for dark mode