Works with the AI tools you already use
Claude Code
Cursor
Codex CLI
Muse
OpenClaw+21 moreClaude CodeCursorCodex CLIMuseOpenClaw
Manus
Grok
Grok Bot+18 agentsTailwind CSS Review & Optimizer
Reviews Tailwind CSS code across 5 dimensions — class redundancy, v3→v4 migration, design token usage, and accessibility (both Tailwind classes and HTML structure) — then applies the fixes you approve.
Free
Tailwind CSS Review & Optimizer
Example session with this skill installed
Review the Tailwind classes in index.html and fix what's safe to auto-fix.
- Read your context and instructions
- Compiled the tailwind css review
- Generated the design tokens stylesheet
Tailwind CSS Review Results — index.html (v4)
Summary
| Dimension | Count |
|---|---|
| Class redundancy | 4 |
| v4 migration | 8 |
| Design tokens | 5 |
| Accessibility (Tailwind) | 2 |
| HTML structure a11y | 6 |
| Total | 25 |
Sample findings
[Redundancy] index.html:9
Issue: `flex` and `block` are both specified
Fix: <header class="flex items-center justify-between px-6 py-4">
[Shared Classes] index.html:27,31,35
Issue: 3 feature cards all have "bg-white p-6 rounded shadow-sm flex-shrink flex-grow"
Fix: move to the grid parent via *:
[v4 Migration] index.html:21
Issue: `bg-opacity-90` removed in v4 → slash syntax; `shadow-sm` renamed to `shadow-xs`
Fix: bg-[#294779]/90 shadow-xs
[Token] index.html:26
Issue: gap-[52px] is not in the common table but is a clean /4 step (52/4=13)
Fix: gap-13
[HTML a11y] index.html:19,25,43,56
Issue: Heading hierarchy skips from <h1> straight to <h3> (no <h2> anywhere)
Fix: change section headings from <h3> to <h2>
19 of 25 findings were auto-applied. 2 findings (footer contrast on text-gray-400/bg-gray-900, and two hardcoded colors with no @theme/DESIGN.md defined yet) were flagged for manual review only — contrast needs visual/WCAG verification, and colors need a design-token decision this skill won't make on its own.
Before / After (excerpt)
<!-- Before -->
<header class="flex block items-center justify-between px-6 py-4">
<nav class="flex space-x-6">
<a class="text-gray-800 hover:text-blue-600" href="#features">Features</a>
<a class="text-gray-800 hover:text-blue-600" href="#pricing">Pricing</a>
<a class="text-gray-800 hover:text-blue-600" href="#faq">FAQ</a>
</nav>
</header>
...
<a href="#" class="mt-8 inline-block bg-[#294779] bg-opacity-90 text-white px-6 py-3 rounded shadow-sm">GET STARTED</a>
<!-- After -->
<header class="flex items-center justify-between px-6 py-4">
<nav aria-label="Main navigation" class="flex gap-6 *:text-gray-800 *:hover:text-blue-600">
<a href="#features">Features</a>
<a href="#pricing">Pricing</a>
<a href="#faq">FAQ</a>
</nav>
</header>
...
<button type="button" class="mt-8 inline-block bg-[#294779]/90 text-white px-6 py-3 rounded shadow-xs uppercase">Get started</button>
Summary
tailwind-review complete (Tailwind v4, full page)
Fixes applied:
- 4 redundancy fixes (flex+block removed, 3 groups consolidated via *:)
- 8 v4 migration fixes (space-x/y → gap, bg-opacity → slash syntax, flex-shrink/grow → shrink/grow,
shadow-sm → shadow-xs ×3, bg-gradient-to-r → bg-linear-to-r, outline-none → outline-hidden)
- 2 design-token scale fixes (w-[320px] → w-80, gap-[52px] → gap-13)
- 3 typography suggestions applied (leading-tight added to text-xs)
- 1 Tailwind a11y fix (uppercase class instead of literal caps in HTML)
- 6 HTML structure a11y fixes (nav aria-label, CTA converted to <button>, 2× button type,
label added for the email input, 3 heading levels fixed h3 → h2)
Flagged, not auto-applied (advisory only, by design):
- footer text-gray-400 on bg-gray-900 — contrast warning, needs visual/WCAG verification
- 2 hardcoded colors — no @theme/DESIGN.md defined yet, flagged for future token definition
tailwind-css-review-optimizer-tokens.css
CSS · design tokens
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
About this skill
Tailwind projects accumulate small rot over time: conflicting classes left over from edits, v3-era utilities that quietly changed meaning in v4, one-off hex colors that should have been design tokens, and accessibility gaps that don't show up until a screen reader hits them. This skill checks all of that in one pass, framework-agnostic, and fixes what's safe to fix automatically.
What it does
- Detects conflicting or redundant classes on the same element (flex + block, w-full + w-1/2), and finds groups of siblings that share classes worth consolidating with Tailwind's `*:` variant
- Detects your Tailwind version and flags v3-era classes that were removed, renamed, or silently changed scale in v4 (opacity utilities, flex-shrink/grow, shadow/blur/rounded scale shifts, gradients, and more) — offers a full v3→v4 migration when needed
- Finds hardcoded arbitrary values (`text-[#294779]`, `w-[320px]`, `font-['Inter']`) and suggests replacing them with your DESIGN.md tokens, your `@theme` variables, or the closest built-in Tailwind scale value — including computing the correct spacing step even for values not in any reference table
- Flags visual accessibility issues Tailwind styling can hide: uppercase text written directly in HTML instead of the `uppercase` class, and low-contrast gray-on-light-background text worth a WCAG check
- Checks HTML structure independent of Tailwind: missing `aria-label` on nav, buttons without a `type`, inputs relying on placeholder instead of a label, and heading hierarchy skips
- Applies auto-fixable items (redundancy, v4 renames, scale conversions) after you confirm — advisory-only items like contrast warnings are reported but never silently changed
How it works
- Detects your Tailwind version from package.json / tailwind.config.js / your CSS entry file, and reads DESIGN.md if present as the top-priority reference for design tokens
- Scans every HTML / JSX / TSX / Vue / Astro file with Tailwind classes across the 5 review dimensions
- Presents a full findings report grouped by dimension, with a total count and file/line references
- Asks whether to apply the auto-fixable items, review file by file, or stop after the report
- Applies approved fixes directly with the Edit tool, leaving advisory-only findings (contrast, undefined design tokens) as recommendations
What it is not
This reviews code already written in Tailwind. If a project isn't using Tailwind yet (plain CSS, Sass/SCSS), use a migration skill first to get Tailwind classes in place — this skill has nothing to review until then. It also doesn't invent design tokens on your behalf: if no DESIGN.md or `@theme` exists, hardcoded colors are flagged for you to decide on, not silently converted to a guessed token name.
Requirements
Framework-agnostic — works on `.html`, `.tsx`, `.jsx`, `.vue`, and `.astro` files using either `class=` or `className=`. No specific framework or build tool is required; Tailwind version is auto-detected where possible, or you'll be asked once.
More from KMRVID
The full Claude Code skill bundle for Tailwind, Astro, and Figma workflows is available on Gumroad: https://gaspanik.gumroad.com/l/kmrvid-claudeskills
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
1 install
Downloaded by developers to date
Free forever
No account required to browse
Trust & safety
Security scanned
Verified clean 4 days ago
- Free to download with an account