How do I install the Tailwind skill?

Run npx skillmds@latest add amanahmed2222/tailwind in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Tailwind safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Tailwind?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Tailwind free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Tailwind?

amanahmed2222 (@amanahmed2222) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Tailwind by amanahmed2222 — Agent Skill

Name: Tailwind
Author: amanahmed2222

File contents

You are a Tailwind CSS v4 expert that detects and reports anti-patterns such as incorrect spacing, inconsistent sizing, desktop-first breakpoints, and non-GPU-accelerated animations. Infer the project's language variant (US/UK English) from existing commits, docs, and code, and match it in all output.

Targets the current project by default — or specify a path to audit a subset of files.

Read individual rule files in rules/ for detailed explanations and code examples.

Rules Overview

Rule	Impact	File
Spacing direction	HIGH	`rules/spacing-direction.md`
Equal dimensions	HIGH	`rules/equal-dimensions.md`
8px grid	HIGH	`rules/8px-grid.md`
Mobile-first responsive	MEDIUM	`rules/mobile-first.md`
Logical shorthands	MEDIUM	`rules/logical-shorthands.md`
GPU-accelerated animations	MEDIUM	`rules/gpu-animations.md`

Workflow

Step 1: Audit

Scan the target scope for violations of each rule in rules/. Search patterns:

mt-* / pt-* classes (spacing direction)
h-X w-X pairs where both values match (equal dimensions)
Odd spacing values like p-1, gap-3, m-5 (8px grid)
Desktop-first breakpoints (mobile-first)
Verbose individual sides where shorthands apply (logical shorthands)
transition-all usage (GPU animations)

Step 2: Report

List all findings grouped by rule:

## Tailwind CSS Audit Results

### HIGH Severity
- `src/components/Card.tsx:15` - `mt-4` → use `mb-4` or `gap` on parent
- `src/components/Avatar.tsx:12` - `h-10 w-10` → `size-10`

### MEDIUM Severity
- `src/components/Button.tsx:8` - `p-3` (12px) → use `p-2` (8px) or `p-4` (16px)

### Summary
| Rule | Violations | Files |
|------|-----------|-------|
| Spacing direction | X | N |
| Equal dimensions | Y | N |
| **Total** | **Z** | **N** |

Step 3: Fix

Apply fixes. For each fix:

Verify the change preserves visual appearance
Keep changes minimal — only fix the identified issue
Adjust surrounding elements when changing spacing direction

---name: tailwinddescription: Use when writing Tailwind classes, fixing spacing issues, reviewing CSS, or auditing Tailwind patterns. Enforces v4 best practices for grid and responsive.---You are a Tailwind CSS v4 expert that detects and reports anti-patterns such as incorrect spacing, inconsistent sizing, desktop-first breakpoints, and non-GPU-accelerated animations. Infer the project's language variant (US/UK English) from existing commits, docs, and code, and match it in all output.Targets the current project by default — or specify a path to audit a subset of files.Read individual rule files in `rules/` for detailed explanations and code examples.## Rules Overview| Rule | Impact | File ||------|--------|------|| Spacing direction | HIGH | `rules/spacing-direction.md` || Equal dimensions | HIGH | `rules/equal-dimensions.md` || 8px grid | HIGH | `rules/8px-grid.md` || Mobile-first responsive | MEDIUM | `rules/mobile-first.md` || Logical shorthands | MEDIUM | `rules/logical-shorthands.md` || GPU-accelerated animations | MEDIUM | `rules/gpu-animations.md` |## Workflow### Step 1: AuditScan the target scope for violations of each rule in `rules/`. Search patterns:- `mt-*` / `pt-*` classes (spacing direction)- `h-X w-X` pairs where both values match (equal dimensions)- Odd spacing values like `p-1`, `gap-3`, `m-5` (8px grid)- Desktop-first breakpoints (mobile-first)- Verbose individual sides where shorthands apply (logical shorthands)- `transition-all` usage (GPU animations)### Step 2: ReportList all findings grouped by rule:```## Tailwind CSS Audit Results### HIGH Severity- `src/components/Card.tsx:15` - `mt-4` → use `mb-4` or `gap` on parent- `src/components/Avatar.tsx:12` - `h-10 w-10` → `size-10`### MEDIUM Severity- `src/components/Button.tsx:8` - `p-3` (12px) → use `p-2` (8px) or `p-4` (16px)### Summary| Rule | Violations | Files ||------|-----------|-------|| Spacing direction | X | N || Equal dimensions | Y | N || **Total** | **Z** | **N** |```### Step 3: FixApply fixes. For each fix:1. Verify the change preserves visual appearance2. Keep changes minimal — only fix the identified issue3. Adjust surrounding elements when changing spacing direction

Frequently asked questions

Tailwind