20 févr. 2025 · 2 min read

Construire avec Tailwind CSS v4

Comment configurer Tailwind CSS v4 avec Astro et créer un système de tokens de design personnalisé.

tailwind css design-system

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 *));