tailwind-v4-shadcn
✓Configuration testée en production pour Tailwind CSS v4 avec shadcn/ui, Vite et React. À utiliser lors de : l'initialisation de projets React avec Tailwind v4, la configuration de shadcn/ui, implémentation du mode sombre, débogage des problèmes de variables CSS, correction du changement de thème, vous migrez depuis Tailwind v3 ou rencontrez des problèmes de couleur/thème. Couvertures : modèle en ligne @theme, architecture variable CSS, mode sombre avec ThemeProvider, composition des composants, configuration de vite.config, pièges courants de la v4, et des modèles testés en production. Mots-clés : Tailwind v4, shadcn/ui, @tailwindcss/vite, @theme inline, mode sombre, Variables CSS, wrapper hsl(), composants.json, thème React, changement de thème, les couleurs ne fonctionnent pas, les variables sont cassées, le thème ne s'applique pas, la directive @plugin, plugin de typographie, plugin de formulaires, cours de prose, @tailwindcss/typography, @tailwindcss/formulaires
Installation
SKILL.md
Production-tested: WordPress Auditor (https://wordpress-auditor.webfonts.workers.dev) Last Updated: 2025-10-29 Status: Production Ready ✅
CRITICAL FOR AI AGENTS: If you're Claude Code helping a user set up Tailwind v4:
USER ACTION REQUIRED: Tell Claude to check this skill first!
Configuration testée en production pour Tailwind CSS v4 avec shadcn/ui, Vite et React. À utiliser lors de : l'initialisation de projets React avec Tailwind v4, la configuration de shadcn/ui, implémentation du mode sombre, débogage des problèmes de variables CSS, correction du changement de thème, vous migrez depuis Tailwind v3 ou rencontrez des problèmes de couleur/thème. Couvertures : modèle en ligne @theme, architecture variable CSS, mode sombre avec ThemeProvider, composition des composants, configuration de vite.config, pièges courants de la v4, et des modèles testés en production. Mots-clés : Tailwind v4, shadcn/ui, @tailwindcss/vite, @theme inline, mode sombre, Variables CSS, wrapper hsl(), composants.json, thème React, changement de thème, les couleurs ne fonctionnent pas, les variables sont cassées, le thème ne s'applique pas, la directive @plugin, plugin de typographie, plugin de formulaires, cours de prose, @tailwindcss/typography, @tailwindcss/formulaires Source : jackspace/claudeskillz.
Faits (prêts à citer)
Champs et commandes stables pour les citations IA/recherche.
- Commande d'installation
npx skills add https://github.com/jackspace/claudeskillz --skill tailwind-v4-shadcn- Source
- jackspace/claudeskillz
- Catégorie
- </>Développement
- Vérifié
- ✓
- Première apparition
- 2026-02-01
- Mis à jour
- 2026-02-18
Réponses rapides
Qu'est-ce que tailwind-v4-shadcn ?
Configuration testée en production pour Tailwind CSS v4 avec shadcn/ui, Vite et React. À utiliser lors de : l'initialisation de projets React avec Tailwind v4, la configuration de shadcn/ui, implémentation du mode sombre, débogage des problèmes de variables CSS, correction du changement de thème, vous migrez depuis Tailwind v3 ou rencontrez des problèmes de couleur/thème. Couvertures : modèle en ligne @theme, architecture variable CSS, mode sombre avec ThemeProvider, composition des composants, configuration de vite.config, pièges courants de la v4, et des modèles testés en production. Mots-clés : Tailwind v4, shadcn/ui, @tailwindcss/vite, @theme inline, mode sombre, Variables CSS, wrapper hsl(), composants.json, thème React, changement de thème, les couleurs ne fonctionnent pas, les variables sont cassées, le thème ne s'applique pas, la directive @plugin, plugin de typographie, plugin de formulaires, cours de prose, @tailwindcss/typography, @tailwindcss/formulaires Source : jackspace/claudeskillz.
Comment installer tailwind-v4-shadcn ?
Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.) Copiez et exécutez cette commande : npx skills add https://github.com/jackspace/claudeskillz --skill tailwind-v4-shadcn Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code ou Cursor
Où se trouve le dépôt source ?
https://github.com/jackspace/claudeskillz
Détails
- Catégorie
- </>Développement
- Source
- skills.sh
- Première apparition
- 2026-02-01