tailwind-css-v4-mastery
Maîtrisez Tailwind CSS V4 avec l'assistance de l'IA
Tailwind CSS V4 introduit des changements révolutionnaires avec son moteur Oxide et sa configuration CSS-first. Cette compétence fournit une expertise pour naviguer la migration, optimiser les performances et créer des systèmes de conception modernes.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "tailwind-css-v4-mastery". Aide-moi à migrer mes utilitaires d'ombre v3 vers v4
Erwartetes Ergebnis:
- Migration des ombres v3 → v4 :
- • .shadow → .shadow-sm (ombre par défaut réduite)
- • .shadow-sm → .shadow-xs (petit devient extra-petit)
- • .shadow-md → .shadow (moyen est maintenant par défaut)
- • Pas de changements pour shadow-lg, shadow-xl, shadow-2xl
- Correction rapide : Find/replace dans vos fichiers :
- sed -i 's/\bshadow\b/shadow-sm/g' *.html
- sed -i 's/\bshadow-sm\b/shadow-xs/g' *.html
Verwendung von "tailwind-css-v4-mastery". Crée une configuration @theme pour mes couleurs de marque
Erwartetes Ergebnis:
- Ajoutez ceci à votre fichier CSS :
- @import "tailwindcss";
- @theme {
- --color-brand-primary: oklch(0.6 0.15 250);
- --color-brand-secondary: oklch(0.7 0.12 180);
- --color-brand-accent: oklch(0.8 0.2 45);
- }
- Utilisation : bg-brand-primary, text-brand-accent, etc.
Verwendung von "tailwind-css-v4-mastery". Quel plugin V4 dois-je utiliser avec Vite ?
Erwartetes Ergebnis:
- Utilisez @tailwindcss/vite pour des performances optimales :
- 1. npm install -D @tailwindcss/vite
- 2. Ajoutez à vite.config.ts :
- import tailwindcss from '@tailwindcss/vite';
- plugins: [react(), tailwindcss()]
- Amélioration attendue : constructions 10 à 100x plus rapides vs PostCSS
Sicherheitsaudit
SicherThis is a documentation-only skill containing Tailwind CSS V4 guides and one benign migration shell script. The static analyzer generated 435 false positives by misinterpreting markdown backticks as shell execution, documentation URLs as network threats, and text patterns like 'md' as weak cryptography. All findings are false positives - no cryptographic code, no credential access, no exfiltration patterns, no malicious behavior exists. The migration script only performs standard file backup and sed operations for CSS migration purposes.
Probleme mit niedrigem Risiko (1)
Risikofaktoren
⚡ Enthält Skripte (1)
🌐 Netzwerkzugriff (1)
📁 Dateisystemzugriff (1)
Qualitätsbewertung
Was du bauen kannst
Migrer de Tailwind v3 vers v4
Migration automatisée avec détection des changements cassants, mise à jour des utilitaires et conversion de la configuration de JavaScript vers l'approche CSS-first.
Construire des bibliothèques de composants modernes
Créer des systèmes de conception extensibles avec les variables CSS, le support multi-thèmes et le style scopé aux composants utilisant l'architecture V4.
Optimiser les performances de construction
Atteindre des constructions 10 à 100x plus rapides avec la configuration du moteur Oxide, la sélection de plugins et les patrons d'optimisation CSS.
Probiere diese Prompts
Je dois migrer mon projet Tailwind v3 vers v4. Peux-tu vérifier quels changements cassants affectent ma configuration actuelle ? J'utilise beaucoup les utilitaires d'ombres, de coins arrondis et d'opacité.
Aide-moi à concevoir un système de composants de boutons dans Tailwind V4 avec des variantes primaire_secondaire, des tailles et le support du mode sombre utilisant la configuration @theme.
Mes constructions Tailwind v4 prennent 2-3 secondes avec PostCSS. Comment puis-je optimiser cela ? J'utilise Webpack dans un projet Next.js.
Je dois supporter 5 thèmes de marques différents dans notre application entreprise. Montre-moi comment configurer les variables CSS et le changement de thèmes avec des attributs data dans Tailwind V4.
Bewährte Verfahren
- Toujours utiliser le préfixe -- dans les blocs @theme : --color-primary et non color-primary
- Choisir le bon plugin pour votre outil de construction : @tailwindcss/vite pour Vite, @tailwindcss/postcss pour Webpack
- Tester les couleurs de bordures et les largeurs de ring après migration - les valeurs par défaut ont changé significativement
Vermeiden
- Ne gardez pas tailwind.config.js - V4 l'ignore complètement. Utilisez @theme dans CSS à la place
- Évitez de définir des palettes de couleurs complètes - surchargez uniquement ce dont vous avez besoin des valeurs par défaut
- N'utilisez jamais les utilitaires d'opacité - ils sont supprimés. Utilisez les modificateurs de couleurs comme bg-black/50 à la place