Agent skill for Tailwind CSS cleanup: sorts, deduplicates, and resolves conflicting utility classes inside Claude Code, Cursor, and other coding agents.
O que faz
ui.sh Canonicalize Tailwind is an agent skill that sorts, deduplicates, collapses shorthands, and resolves conflicting Tailwind CSS classes without changing visual output. It installs via the ui.sh CLI and runs inside any MCP-compatible coding agent.
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."
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.
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.
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.
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.
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.
Recursos
Notas de campo
Revisado em Jun 26, 2026
Ideal para
Resultados para quem cria
Atenção
Testado com
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).
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.
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.
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.
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
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.
Uma skill de IA que fornece inteligência de design a agentes de codificação, com regras de raciocínio e estilos de UI para geração de UI/UX profissional em diversas plataformas e frameworks.
Best for Estruturar um design system a partir de um briefing de projetoUma habilidade de design para Claude Code, Cursor e Codex que se recusa a parecer gerada por IA: escolhe uma macroestrutura para o briefing, aplica um dos vinte temas e executa dezenas de verificações anti-slop antes de emitir o resultado.
Best for Projetar UI que não pareça gerada por IAColeção pública de Agent Skills de exemplo da Anthropic para o Claude: pastas independentes de instruções, scripts e recursos abrangendo tarefas criativas, técnicas e empresariais, incluindo as skills de documentos que alimentam as capacidades de arquivos do Claude.
Best for Aprender a criar Agent SkillsOpen-source collection of 45+ AI agent skills for marketing, CRO, SEO, copywriting, analytics, and growth, built for Claude Code, Cursor, and any Agent Skills-compatible agent.
Best for Technical marketers and founders using Claude Code, Cursor, Windsurf, or OpenAI Codex who want marketing domain knowledge baked inOpen-source PM skills marketplace: 68 AI skills and 42 workflows across 9 Claude plugins for product managers doing discovery, strategy, execution, and launch.
Best for PMs using Claude Code or Claude Cowork who want framework-driven decisions baked into daily AI workflowsA catalog of repeatable AI agent workflows with built-in feedback loops, plus an installable skill for finding, adapting, and designing your own loops.
Best for Teams using Codex, Cursor, or Claude Code who want agents to iterate reliably instead of making one-shot guesses