tailwind-css-v4

name	tailwind-css-v4
description	Reference for Tailwind CSS v4 syntax and the differences from v3.x. Use when configuring Tailwind (CSS-first @theme config, @import "tailwindcss"), using new v4 features (container queries, 3D transforms, gradients, composable variants, @utility/@variant/@plugin), or migrating v3 patterns. This repo is on v4 — do NOT emit v3 syntax like tailwind.config.js, @tailwind directives, or bg-gradient-*.
metadata	{"source":"migrated from .cursor/rules/tailwind-css-v4.mdc"}

Tailwind CSS v4

Core Changes

• CSS-first configuration: Configuration is now done in CSS instead of JavaScript

  • Use @theme directive in CSS instead of tailwind.config.js

  • Example:

    @import "tailwindcss";
    
    @theme {
      --font-display: "Satoshi", "sans-serif";
      --breakpoint-3xl: 1920px;
      --color-avocado-500: oklch(0.84 0.18 117.33);
      --ease-fluid: cubic-bezier(0.3, 0, 0, );
    }