Tailwind CSS development patterns - **name_fr:** Patterns de développement Tailwind CSS - **tl_en:** Responsive layouts, dark mode, design-system habits and troubleshooting for Tailwind CSS v4.1+ - **tl_fr:** Layouts responsives, mode sombre, bonnes pratiques de design system et dépannage pour Tailwind CSS v4.1+ - **creator:** @giuseppe-trisciuoglio - **type:** Agent skill - **url:** https://github.com/giuseppe-trisciuoglio/developer-kit - **cat:** Frontend - **kws:** tailwind css, utility-first, responsive design, dark mode, design system, css, v4 - **license:** MIT **Description EN:** Curated by Skill Harbor — a hands-on Tailwind CSS v4.1+ pattern guide for styling React/Vue/Svelte components: responsive breakpoints and layout utilities (flexbox, grid, spacing), a responsive card, dark-mode toggle and form-input examples, component-extraction and utility-composition habits, performance (content paths, purging) and accessibility guidance, plus a troubleshooting section (classes not applying, responsive styles, dark-mode issues). By @giuseppe-trisciuoglio, listed here with credit to its creator. Honest caveats: a patterns guide, not the official docs — deep dives live in the referenced files and tailwindcss.com; aimed at Tailwind v4.1+, so v3 projects will hit syntax differences. Discovered via skills.sh. Skill Harbor never reviews the code, review it yourself before use. **Description FR:** Sélectionné par Skill Harbor — un guide pratique de patterns Tailwind CSS v4.1+ pour styliser des composants React/Vue/Svelte : breakpoints responsives et utilitaires de layout (flexbox, grid, espacement), exemples de carte responsive, toggle de mode sombre et champ de formulaire, habitudes d'extraction de composants et de composition d'utilitaires, conseils de performance (chemins de contenu, purge) et d'accessibilité, plus une section de dépannage (classes non appliquées, styles responsives, problèmes de mode sombre). Crédit : @giuseppe-trisciuoglio. Bémols honnêtes : un guide de patterns, pas la doc officielle — les approfondissements vivent dans les fichiers référencés et sur tailwindcss.com ; ciblé Tailwind v4.1+, les projets v3 rencontreront des différences de syntaxe. Découvert via skills.sh. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. **Install prompt EN:** ``` Prerequisites: a project with Tailwind CSS v4.1+ set up (v3 projects will hit syntax differences) Install "Tailwind CSS development patterns" for me. Give my agent the Tailwind CSS v4.1+ pattern guide — responsive breakpoints and layout utilities, dark mode, component extraction, design-system habits, performance and accessibility guidance, plus troubleshooting for classes not applying Repository: https://github.com/giuseppe-trisciuoglio/developer-kit/blob/main/plugins/developer-kit-typescript/skills/tailwind-css-patterns/SKILL.md 1. Fetch the SKILL.md file for the giuseppe-trisciuoglio-developer-kit-tailwind-css-patterns skill from the repository into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code, credentials only via the secure vault, allowed hosts declared in the SKILL.md. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md into the agent's skills directory, in a folder named "giuseppe-trisciuoglio-developer-kit-tailwind-css-patterns". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. confirm Tailwind v4.1+ is configured in my project, including content paths for purging). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me. ``` **Install prompt FR:** ``` Prérequis : un projet avec Tailwind CSS v4.1+ configuré (les projets v3 rencontreront des différences de syntaxe) Installe-moi « Patterns de développement Tailwind CSS ». Donne à mon agent le guide de patterns Tailwind CSS v4.1+ — breakpoints responsives et utilitaires de layout, mode sombre, extraction de composants, habitudes de design system, conseils de performance et d'accessibilité, plus le dépannage des classes non appliquées Dépôt : https://github.com/giuseppe-trisciuoglio/developer-kit/blob/main/plugins/developer-kit-typescript/skills/tailwind-css-patterns/SKILL.md 1. Récupère le fichier SKILL.md du skill giuseppe-trisciuoglio-developer-kit-tailwind-css-patterns depuis le dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Contrôle de sécurité : examine le SKILL.md pour tout contenu suspect (appels réseau inattendus, commandes shell, récolte d'identifiants). Ce dépôt ne doit contenir aucun secret dans le code ; les identifiants passent uniquement par le coffre sécurisé, les hôtes autorisés sont déclarés dans le SKILL.md. Vérifie que c'est bien le cas ; STOP sur le moindre signal d'alerte et préviens-moi. 3. Installe-le comme skill : copie SKILL.md dans le répertoire des skills de l'agent, dans un dossier nommé « giuseppe-trisciuoglio-developer-kit-tailwind-css-patterns ». 4. Vérifie sans aucun appel 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 (p. ex. confirmer que Tailwind v4.1+ est configuré dans mon projet, chemins de contenu inclus pour la purge). 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 si c'est 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. ``` ---

Layouts responsives, mode sombre, bonnes pratiques de design system et dépannage pour Tailwind CSS v4.1+ - **creator:** @giuseppe-trisciuoglio - **type:** Agent skill - **url:** https://github.com/giuseppe-trisciuoglio/developer-kit - **cat:** Frontend - **kws:** tailwind css, utility-first, responsive design, dark mode, design system, css, v4 - **license:** MIT **Description EN:** Curated by Skill Harbor — a hands-on Tailwind CSS v4.1+ pattern guide for styling React/Vue/Svelte components: responsive breakpoints and layout utilities (flexbox, grid, spacing), a responsive card, dark-mode toggle and form-input examples, component-extraction and utility-composition habits, performance (content paths, purging) and accessibility guidance, plus a troubleshooting section (classes not applying, responsive styles, dark-mode issues). By @giuseppe-trisciuoglio, listed here with credit to its creator. Honest caveats: a patterns guide, not the official docs — deep dives live in the referenced files and tailwindcss.com; aimed at Tailwind v4.1+, so v3 projects will hit syntax differences. Discovered via skills.sh. Skill Harbor never reviews the code, review it yourself before use. **Description FR:** Sélectionné par Skill Harbor — un guide pratique de patterns Tailwind CSS v4.1+ pour styliser des composants React/Vue/Svelte : breakpoints responsives et utilitaires de layout (flexbox, grid, espacement), exemples de carte responsive, toggle de mode sombre et champ de formulaire, habitudes d'extraction de composants et de composition d'utilitaires, conseils de performance (chemins de contenu, purge) et d'accessibilité, plus une section de dépannage (classes non appliquées, styles responsives, problèmes de mode sombre). Crédit : @giuseppe-trisciuoglio. Bémols honnêtes : un guide de patterns, pas la doc officielle — les approfondissements vivent dans les fichiers référencés et sur tailwindcss.com ; ciblé Tailwind v4.1+, les projets v3 rencontreront des différences de syntaxe. Découvert via skills.sh. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. **Install prompt EN:** ``` Prerequisites: a project with Tailwind CSS v4.1+ set up (v3 projects will hit syntax differences) Install "Tailwind CSS development patterns" for me. Give my agent the Tailwind CSS v4.1+ pattern guide — responsive breakpoints and layout utilities, dark mode, component extraction, design-system habits, performance and accessibility guidance, plus troubleshooting for classes not applying Repository: https://github.com/giuseppe-trisciuoglio/developer-kit/blob/main/plugins/developer-kit-typescript/skills/tailwind-css-patterns/SKILL.md 1. Fetch the SKILL.md file for the giuseppe-trisciuoglio-developer-kit-tailwind-css-patterns skill from the repository into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code, credentials only via the secure vault, allowed hosts declared in the SKILL.md. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md into the agent's skills directory, in a folder named "giuseppe-trisciuoglio-developer-kit-tailwind-css-patterns". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. confirm Tailwind v4.1+ is configured in my project, including content paths for purging). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me. ``` **Install prompt FR:** ``` Prérequis : un projet avec Tailwind CSS v4.1+ configuré (les projets v3 rencontreront des différences de syntaxe) Installe-moi « Patterns de développement Tailwind CSS ». Donne à mon agent le guide de patterns Tailwind CSS v4.1+ — breakpoints responsives et utilitaires de layout, mode sombre, extraction de composants, habitudes de design system, conseils de performance et d'accessibilité, plus le dépannage des classes non appliquées Dépôt : https://github.com/giuseppe-trisciuoglio/developer-kit/blob/main/plugins/developer-kit-typescript/skills/tailwind-css-patterns/SKILL.md 1. Récupère le fichier SKILL.md du skill giuseppe-trisciuoglio-developer-kit-tailwind-css-patterns depuis le dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Contrôle de sécurité : examine le SKILL.md pour tout contenu suspect (appels réseau inattendus, commandes shell, récolte d'identifiants). Ce dépôt ne doit contenir aucun secret dans le code ; les identifiants passent uniquement par le coffre sécurisé, les hôtes autorisés sont déclarés dans le SKILL.md. Vérifie que c'est bien le cas ; STOP sur le moindre signal d'alerte et préviens-moi. 3. Installe-le comme skill : copie SKILL.md dans le répertoire des skills de l'agent, dans un dossier nommé « giuseppe-trisciuoglio-developer-kit-tailwind-css-patterns ». 4. Vérifie sans aucun appel 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 (p. ex. confirmer que Tailwind v4.1+ est configuré dans mon projet, chemins de contenu inclus pour la purge). 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 si c'est 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. ``` ---

Version :