Construire avec Tailwind CSS v4

Tailwind CSS v4 introduit un nouveau moteur basé sur Lightning CSS, apportant des améliorations significatives de performance.

Configuration du plugin Vite

Dans Tailwind v4, on utilise le plugin Vite au lieu de PostCSS :

import tailwindcss from "@tailwindcss/vite";

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

Définissez vos tokens avec des propriétés CSS personnalisées et la directive @theme :

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

Tailwind v4 facilite le mode sombre avec les variantes personnalisées :

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