tailwind by tartinerlabs/skills

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.

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