tailwind-css-patterns skill (giuseppe-trisciuoglio) for Claude: Tailwind styling

Gives your agent Tailwind CSS patterns for responsive layouts, dark mode and components, including v4.1 configuration. For front-end developers.

Installs: 17.8K; on skills.sh
Stars: 366; on GitHub
Files: 8; besides SKILL.md
Updated: Sep 2026; last repo commit

tailwind-css-patterns makes your agent style interfaces with Tailwind CSS utility classes, mobile first. It gives breakpoint values, common layout snippets, a responsive card, a dark-mode example, a form input, and a troubleshooting list for classes not applying, responsive styles and dark mode. It says it covers v4.1 features such as CSS-first configuration.

It loads when you style components or build responsive layouts. Eight reference files cover layout, components, responsive design, animations, performance, accessibility and configuration. Its allowed tools include Bash, so the agent may run builds such as npm run build.

Good for

Front-end developers styling React, Vue or Svelte components
Teams building a design system on Tailwind
Anyone debugging classes that do not apply or dark mode that flashes

Install tailwind-css-patterns

Claude Code

Copy this prompt.

Install the tailwind-css-patterns skill in Claude Code. Run this command:

npx skills add https://github.com/giuseppe-trisciuoglio/developer-kit --skill tailwind-css-patterns

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.

Sections in SKILL.md

Overview
When to Use
Quick Reference
Responsive Breakpoints
Common Patterns
Instructions
Examples
Responsive Card Component
Dark Mode Toggle
Form Input
Best Practices
Troubleshooting
Classes Not Applying
Responsive Styles Not Working
Dark Mode Issues
Constraints and Warnings

Key facts

Author: giuseppe-trisciuoglio
License: MIT
Installs on skills.sh: 17,780 (Nov 2, 2026)
GitHub stars: 366 for the whole repo (Nov 2, 2026)
Last commit: Sep 10, 2026
Files: 9 files including SKILL.md
Part of: developer-kit, a set of plugins for AI coding tools
Allowed tools: Read, Write, Edit, Glob, Grep, Bash
Tailwind version: v4.1+ features

What it includes

sm, md, lg, xl and 2xl widths
A table of the five prefixes and their minimum widths, from 640px to 1536px.
Responsive breakpoints
Centering, grids and a card
Short HTML snippets for a centered page, a responsive 1 to 4 column grid and a card.
Write · Common patterns
Mobile first, tokens, compose, extract, configure, verify
Tells the agent to write base styles first, use the scales, extract repeated patterns, set the theme, and test each breakpoint.
Try: “Make this product card responsive with Tailwind.”
Six working rules
Product card, dark mode toggle, form input
A React card, a dark mode example and an input with focus styles.
Write · Examples
Classes, responsive order, dark mode
Checks content paths, rebuilds with npm run build, notes that responsive prefixes go before plain classes, and sets the darkMode strategy.
Runs code · Troubleshooting
Eight deep-dive documents
Layout, components, responsive design, animations, performance, accessibility, configuration and a general reference.
Read · Reference files

From the official docs

Permissions

Low risk

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

Bash is in its allowed tools
The agent can edit your style files and run build commands such as npm run build. Review changes in git before committing. github.com
Reference files include npm install commands
references/reference.md has npm create vite@latest and npm install tailwindcss @tailwindcss/vite, and references/performance.md has npm install -D cssnano. SKILL.md also suggests npx tailwindcss -o with --watch. Approve installs yourself. github.com

Technical details

Sign-in and keys	No credentials are described.
Scopes	Read, Write, Edit, Glob, Grep, Bash

Questions

What does the tailwind-css-patterns skill do?

It gives your agent Tailwind CSS patterns for responsive layouts, components, dark mode and configuration, plus a short troubleshooting guide.

How do I install it in Claude Code, the Claude app or Codex?

Use the install box above, which installs only this skill. The developer-kit README documents a Claude Code plugin marketplace route and a Makefile install for several CLIs. The developer-kit-typescript plugin also adds 26 skills, 13 agents, 3 commands and hooks that run on session start, before Bash commands, after file edits and on every prompt. The README does not document a Claude app upload.

Does it need an API key?

No. It works on your project's files and may run your own build commands.

Is it safe to install?

It bundles no scripts. Its allowed tools include Write, Edit and Bash, so the agent can change your files and run commands such as npm run build. Approve those as you would for any coding task.

Does it support Tailwind v4?

It says it covers v4.1+ features including CSS-first configuration. Some troubleshooting tips still mention tailwind.config.js, so check which version your project uses.

Does it work with Vue and Svelte?

Its description lists React, Vue and Svelte components. The code examples shown in SKILL.md use plain HTML and React.

Information

updated Nov 2, 2026

Repository: giuseppe-trisciuoglio/developer-kit
Folder: plugins/developer-kit-typescript/skills/tailwind-css-patterns

giuseppe-trisciuoglio/developer-kit skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 5

tailwind-css-patterns SKILL.md · github.com
developer-kit README · github.com
developer-kit-typescript hooks.json · github.com
reference.md · github.com
performance.md · github.com