Skills tailwind

Use when writing Tailwind classes, fixing spacing issues, reviewing CSS, or auditing Tailwind patterns. Enforces v4 best practices for grid and responsive.

install

source · Clone the upstream repo

git clone https://github.com/amanahmed2222/skills

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/amanahmed2222/skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/tailwind" ~/.claude/skills/amanahmed2222-skills-tailwind && rm -rf "$T"

manifest: skills/tailwind/SKILL.md

source content

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