Agent skill for Tailwind CSS cleanup: sorts, deduplicates, and resolves conflicting utility classes inside Claude Code, Cursor, and other coding agents.
Qué hace
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.
Características
Notas de campo
Revisado el Jun 26, 2026
Ideal para
Resultados para creadores
Ten cuidado
Probado con
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.
Una habilidad de IA que proporciona a los agentes de codificación inteligencia de diseño, reglas de razonamiento y estilos de interfaz para generar UI/UX profesional en distintas plataformas y frameworks.
Best for Arrancar un sistema de diseño a partir de la descripción de un proyecto.Una habilidad de diseño para Claude Code, Cursor y Codex que se niega a parecer generada por IA: elige una macroestructura para el encargo, aplica uno de veinte temas y ejecuta decenas de filtros anti-repetición antes de emitir el resultado.
Best for Diseñar UI que no parezca generada por IALa colección pública de Agent Skills de ejemplo para Claude de Anthropic: carpetas autocontenidas de instrucciones, scripts y recursos que abarcan tareas creativas, técnicas y empresariales, incluidas las skills de documentos que impulsan las capacidades de archivos de Claude.
Best for Aprender a crear 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