Tailwind CSS 4 patterns — cn() utility, theme variables, no var() in className
Règles de styling Tailwind 4 : arbre de décision de styling, jamais de var() ni de hex dans className, règles d'usage de cn(), constantes de style pour les librairies, valeurs dynamiques, dark mode, responsive, échappatoire arbitrary-value
- Quoi
- Règles de styling Tailwind 4 : arbre de décision de styling, jamais de var() ni de hex dans className, règles d'usage de cn(), constantes de style pour les librairies, valeurs dynamiques, dark mode, responsive, échappatoire arbitrary-value
- Coût
- Gratuit
- Prérequis
- un projet Tailwind CSS 4 — le skill est un guide de styling que l'agent suit, pas un logiciel
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — tailwind-4 de @gentleman-programming : un skill de styling Tailwind CSS 4 avec des règles strictes. Règles centrales : un arbre de décision de styling (classe Tailwind existe → className ; valeur dynamique → style prop ; conditionnel → cn() ; librairie sans className → style prop avec constantes var()), jamais de var() ni de couleurs hex dans className (toujours des classes Tailwind sémantiques), l'utilitaire cn() (clsx + tailwind-merge) avec règles explicites d'usage et de non-usage, des constantes de style pour les librairies qui n'acceptent pas className (Recharts), des style props pour les valeurs vraiment dynamiques, plus les patterns flexbox/grid/espacement/typographie/bordures/états/responsive/dark-mode et l'échappatoire arbitrary-value. Bémols honnêtes : guidance compacte en un seul fichier — pas de références groupées ; le frontmatter du skill annonce Apache-2.0 alors que le manifest du catalogue indique MIT (le manifest fait foi ; divergence frontmatter/manifest déjà constatée sur ce repo au lot 42). Licence MIT selon le manifest. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh.
Version :
Installation
Prérequis : un projet Tailwind CSS 4 — le skill est un guide de styling que l'agent suit, pas un logiciel Installe-moi « Patterns Tailwind CSS 4 — utilitaire cn(), variables de thème, pas de var() dans className ». Il donne à mon agent les règles Tailwind 4 de @gentleman-programming : l'arbre de décision de styling, jamais de var() ni de couleurs hex dans className (classes Tailwind sémantiques uniquement), l'utilitaire cn() avec règles d'usage et de non-usage, des constantes de style avec var() pour les librairies sans className, des style props pour les valeurs vraiment dynamiques, plus les patterns flexbox/grid/espacement/typographie/états/responsive/dark-mode et l'échappatoire arbitrary-value. Note de licence : le frontmatter du skill annonce Apache-2.0 mais le manifest du catalogue indique MIT — le manifest fait foi. Dépôt : https://github.com/gentleman-programming/gentleman-skills/blob/main/curated/tailwind-4/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers d'aide éventuels) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Vérification de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Ce dépôt ne devrait contenir aucun secret en dur. Vérifie que c'est bien le cas ici ; STOP sur tout signal d'alerte et dis-le-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers d'aide dans le répertoire des skills de l'agent, dans un dossier nommé « tailwind-4 ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (rien — c'est un guide de styling que l'agent applique en écrivant des classes Tailwind). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.