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, 1);
    }