# ui.sh Canonicalize Tailwind By **ui-sh** ยท Skills Agent skill for Tailwind CSS cleanup: sorts, deduplicates, and resolves conflicting utility classes inside Claude Code, Cursor, and other coding agents. - Source: https://ui.sh/skills/canonicalize-tailwind - Install: `npx @uidotsh/install canonicalize-tailwind --token=[token]` - Tags: tailwind, css, agent-skill, mcp, ui, open-source, cli, code-cleanup - Pricing: unknown - Upvotes: 0 ## Features - Sorts Tailwind utility classes into canonical order - Removes duplicate classes from class strings - Collapses shorthand utilities where applicable - Resolves conflicting utilities while keeping visual output identical - Applies cleaned class lists and runs relevant checks - Invocable via /canonicalize-tailwind inside an MCP-compatible coding agent - Outputs results in text, JSON, or line-delimited JSON (via the underlying CLI subcommand) - Works with Claude Code, Cursor, Codex, OpenCode, and Amp --- ## Why it matters Messy Tailwind class strings accumulate fast, especially when multiple agents or developers touch the same components. Conflicting utilities (two `text-` colors, stacked `p-` and `px-` overrides) silently win or lose based on source order, and no linter flags them. Canonicalize Tailwind fixes this class by class, resolving conflicts rather than just sorting. That last word is the key distinction. The widely used `prettier-plugin-tailwindcss` sorts classes alphabetically by Tailwind's recommended order, but it does not resolve conflicts or collapse redundant shorthands. Canonicalize Tailwind does both, making it the right tool when your codebase has grown beyond "I wrote all of this myself." ## The big picture ui.sh is built by Adam Wathan, creator of Tailwind CSS, and Steve Schoger, co-author of Refactoring UI: the two people who defined how Tailwind is written and taught. Canonicalize Tailwind is one skill in their growing suite of agent-oriented design tools. A parallel `tailwindcss canonicalize` CLI subcommand was merged into the Tailwind CSS core repository on March 11, 2026 (PR #19783, authored by Tailwind core member Robin Malfait), confirming the underlying logic is now part of Tailwind itself. ## How it works Install the skill with `npx @uidotsh/install canonicalize-tailwind --token=[token]`. Once installed, invoke `/canonicalize-tailwind` inside your coding agent (Claude Code, Cursor, Codex, OpenCode, or Amp). The skill runs a single cleanup pass: it sorts classes, removes duplicates, collapses shorthand utilities, and resolves conflicting utilities, then applies the cleaned class lists and runs relevant checks. Visual output is untouched. ## Zoom in The power-user use case is pre-review cleanup. Before opening a PR, run `/canonicalize-tailwind` across touched components to strip the entropy that accumulates during rapid agent-assisted iteration. Agents often stack utility overrides rather than replacing them; this pass collapses that noise before it reaches a human reviewer. ## Yes, but The skill requires an invite token from ui.sh, which is currently invite-only. Tailwind CSS must also be installed in the project. There is no standalone fallback if your agent does not support MCP. ## The bottom line Canonicalize Tailwind handles the class hygiene work that sorting alone cannot: conflict resolution and shorthand collapsing. For teams using coding agents heavily, it belongs in the pre-PR checklist. Request access at ui.sh to get your invite token and add the skill in under a minute. ## FAQ ### What is ui.sh Canonicalize Tailwind? ui.sh Canonicalize Tailwind is an agent skill that sorts, deduplicates, collapses shorthands, and resolves conflicting Tailwind CSS utility classes without changing the visual output. It runs as a task-oriented prompt and workflow inside MCP-compatible coding agents such as Claude Code, Cursor, Codex, OpenCode, and Amp. It is part of the ui.sh skill suite created by Adam Wathan (creator of Tailwind CSS) and Steve Schoger (co-author of Refactoring UI). ### How do I install and run the Canonicalize Tailwind skill? Install the skill by running `npx @uidotsh/install canonicalize-tailwind --token=[token]` in your project, replacing `[token]` with your ui.sh invite token. Once installed, invoke it by typing `/canonicalize-tailwind` inside your coding agent. The skill then sorts, deduplicates, collapses, and resolves your Tailwind class strings, applies the changes, and runs relevant checks automatically. ### Is ui.sh free, and do I need a paid plan? ui.sh is invite-only and currently free to access with an invite token; pricing tiers are not publicly disclosed. You must request an invite at ui.sh to obtain a token before installing any skill. Because the platform is described by its creator as 'uncomfortably early,' the pricing model may change as the product matures. ### What is Canonicalize Tailwind best suited for? It is best suited as a pre-PR cleanup step in codebases where coding agents have been writing or editing Tailwind class strings at pace. Agents often stack utility overrides (for example, two conflicting text colors or layered padding shorthands) rather than replacing them; Canonicalize Tailwind collapses that noise before it reaches a human reviewer. It is also valuable on any Tailwind project with multiple contributors where class-string hygiene has drifted. ### How does Canonicalize Tailwind compare to prettier-plugin-tailwindcss? Canonicalize Tailwind goes further than `prettier-plugin-tailwindcss` in two key ways: it resolves conflicting utilities and collapses redundant shorthands, whereas the Prettier plugin only sorts classes into Tailwind's recommended order. If your concern is purely sort order for consistency, the Prettier plugin is simpler to wire into a CI pipeline. If you also need conflict resolution and shorthand collapsing, especially after heavy agent-assisted editing, Canonicalize Tailwind is the better fit. A `tailwindcss canonicalize` CLI subcommand with the same logic was merged into Tailwind CSS core on March 11, 2026 (PR #19783), so the underlying capability is becoming part of the framework itsel ### What are the limitations or risks of using this skill? The skill requires a ui.sh invite token, so you cannot use it without going through the invite process. Tailwind CSS must already be installed in your project for the skill to function; it will not work on plain CSS or other utility frameworks. The platform is self-described as 'uncomfortably early,' meaning the skill's interface or behavior may change as ui.sh evolves. Pricing and long-term availability are not publicly disclosed. --- [View on Analog](https://analoghq.ai/ui-sh/skills/ui-sh-canonicalize-tailwind)