Building with Tailwind CSS v4

Tailwind CSS v4 introduces a new engine built on top of Lightning CSS, bringing significant performance improvements and new features.

Vite Plugin Setup

In Tailwind v4, you use the Vite plugin instead of PostCSS:

import tailwindcss from "@tailwindcss/vite";

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

Define your design tokens using CSS custom properties and the @theme directive:

@theme inline {
  --color-primary: var(--primary);
  --color-background: var(--background);
  --radius-base: 5px;
}

Tailwind v4 makes dark mode easier than ever with custom variants:

@custom-variant dark (&:is(.dark *));

This gives you full control over how dark mode is triggered in your application.