secondsky/tailwind-v4-shadcn

Que fait tailwind-v4-shadcn ?

| Configuration éprouvée pour Tailwind CSS v4 avec shadcn/ui, Vite et React. À utiliser lors : de l'initialisation de projets React avec Tailwind v4, de la configuration de shadcn/ui, de l'implémentation du mode sombre, du débogage de problèmes de variables CSS, de la correction du changement de thème, de la migration depuis Tailwind v3, ou en cas de problèmes de couleurs/thèmes. Couvre : le pattern @theme inline, l'architecture des variables CSS, le mode sombre avec ThemeProvider, la composition de composants, la configuration de vite.config, les pièges courants de la v4, et des patterns éprouvés en production.

Architecture des variables CSS

Utilisez le pattern @theme inline dans votre fichier CSS principal pour définir les variables de thème Tailwind v4 :

@import "tailwindcss";

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  /* Ajoutez d'autres variables selon les besoins */
}

Cela permet une intégration fluide avec shadcn/ui et garantit que les variables CSS sont correctement exposées à Tailwind.

Mode sombre avec ThemeProvider

Pour un mode sombre efficace, utilisez un composant ThemeProvider basé sur React context :

import { createContext, useContext, useEffect, useState } from "react";

type Theme = "dark" | "light" | "system";

const ThemeProviderContext = createContext<{
  theme: Theme;
  setTheme: (theme: Theme) => void;
}>({
  theme: "system",
  setTheme: () => null,
});

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<Theme>("system");

  useEffect(() => {
    const root = window.document.documentElement;
    root.classList.remove("light", "dark");

    if (theme === "system") {
      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
        ? "dark"
        : "light";
      root.classList.add(systemTheme);
      return;
    }

    root.classList.add(theme);
  }, [theme]);

  return (
    <ThemeProviderContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeProviderContext.Provider>
  );
}

export const useTheme = () => useContext(ThemeProviderContext);

Configuration de vite.config

Assurez-vous que vite.config.ts est correctement configuré pour utiliser le plugin Tailwind et les alias :

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import path from "path";

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

Pièges courants de la v4

1. Ordre des classes : Tailwind v4 utilise un mécanisme de spécificité différent. Évitez d'utiliser !important inutilement.
2. Variables CSS : Les variables doivent être définies avec @theme inline pour être reconnues par Tailwind v4.
3. Mode sombre : La classe dark doit être ajoutée à l'élément html ; assurez-vous que ThemeProvider le fait correctement.
4. Alias de chemin : Vérifiez que tsconfig.json et vite.config.ts ont les mêmes alias pour éviter les erreurs d'import.

Patterns éprouvés en production

• Composition de composants : Utilisez cn() (via clsx et tailwind-merge) pour combiner des classes conditionnellement.
• Gestion du thème : Stockez le thème dans localStorage pour persister le choix utilisateur.
• Performance : Évitez les classes dynamiques excessives ; préférez les variantes de Tailwind (dark:, hover:, etc.).

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Pour toute question ou problème supplémentaire, consultez la documentation officielle de Tailwind v4 et celle de shadcn/ui.