tailwind-token-consolidation
Installation
SKILL.md
Tailwind Token Consolidation
You are reducing the count of design tokens in a Tailwind v4 globals.css while preserving visual fidelity.
REQUIRED, in order, for every consolidation task:
- Audit first, edit never-first. Parse
globals.cssinto structured blocks (@theme inline,:root,.dark, every other scoped block). Count tokens. Build a usage map by scanning ALL.ts/.tsx/.css/.mdxfiles (excludingglobals.css) for class names ANDvar(--...)refs. - Compute the LIVE set transitively. A token is live if (a) its suffix appears as a Tailwind class anywhere, OR (b) it is referenced as
var(--name)anywhere, OR (c) it is referenced inside another live token's value. Iterate to a fixed point. - Scan
globals.css's own utility classes too. Anyvar(--...)inside.X { ... }blocks (outside:root/.dark/@theme inline) is a hard dependency. Tokens demanded by those classes MUST stay. - Build a deterministic rename map as data (
old_suffix -> new_suffixorDELETE). Apply it to globals.css AND code in a single script. Never hand-edit class names across the codebase. - Verify after every pass: run
pnpm typecheck,pnpm lint,pnpm format,pnpm build. All must pass before declaring done.
Do not skip any step. A skipped step is a failed task.