Adopter shadcn/ui sans la CLI (Tailwind v4)

Le contexte

shadcn/ui est génial : tu copies les composants dans ton repo, tu les possèdes. Mais sa CLI vise Tailwind v3 (tailwind.config.js). En v4, les tokens vivent dans le CSS via @theme.

Le pattern minimal

Dans globals.css :

@import "tailwindcss";
@plugin "tailwindcss-animate";
@custom-variant dark (&:is(.dark *));

:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  /* ... */
}

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
}

@theme inline {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
}

Et c'est tout. Plus besoin de tailwind.config.ts. Les utilitaires bg-background, text-foreground etc. fonctionnent.

Les composants

Copier-coller depuis ui.shadcn.com marche tel quel — la seule chose à adapter, ce sont les imports d'utils.

Astuce : gradients

En v4, bg-gradient-to-br a été remplacé par bg-linear-to-br. Penser à migrer.

Bilan

Pas de CLI, pas de tailwind.config.ts, juste 50 lignes de CSS et tu possèdes ton design system.