Tailwind

Skill amanahmed2222/skills/skills/tailwind

Install

npx -y skills add amanahmed2222/skills --skill tailwind

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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

SKILL.md

2.2 KB, as published. Nobody here has run it

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