ui-sh-canonicalize-tailwind

name	ui-sh-canonicalize-tailwind
description	Sort, normalize, deduplicate, and resolve conflicting Tailwind utility classes.

Canonicalize Tailwind

Use this when the user wants to clean up, canonicalize, or normalize Tailwind class lists.

Activation

Use For

• cleaning up Tailwind classes
• canonicalizing Tailwind utility lists
• sorting, normalizing, or deduplicating Tailwind classes
• resolving conflicting Tailwind utilities in class strings

Do Not Use For

• new design or layout work
• component extraction or code organization
• visual changes rather than class-list cleanup

Load First

• No companion modules are required.

Progress Updates

Keep the user informed so longer runs do not look stuck.

• One-line status update before each major phase.
• Concrete and lightweight: what you are doing now, not verbose logs.

Workflow

1. Identify Tailwind class strings in the requested files or components.
2. Canonicalize class strings with npx @tailwindcss/cli canonicalize.
3. Apply changed class strings back to the source.
4. Run the project's formatter or relevant checks when available.

Commands

• Use npx @tailwindcss/cli canonicalize to clean up Tailwind class lists — collapses shorthands (mt-2 mr-2 mb-2 ml-2 → m-2), resolves overrides (py-3 p-1 px-3 → p-3), canonicalizes arbitrary values to named utilities, and sorts classes; pass --css path/to/input.css if the project uses a custom CSS entry file

  Single class string:

  npx @tailwindcss/cli canonicalize "mt-2 mr-2 mb-2 ml-2"
  # m-2
  

  Multiple class strings as positional args (each returned on its own line):

  npx @tailwindcss/cli canonicalize "py-3 p-1 px-3" "mt-2 mr-2 mb-2 ml-2"
  # p-3
  # m-2
  

  Pipe class strings via stdin (one per line):

  echo "py-3 p-1 px-3\nmt-2 mr-2 mb-2 ml-2" | npx @tailwindcss/cli canonicalize
  # p-3
  # m-2
  

  Use --format json or --format jsonl for structured output with input/output/changed fields:

  npx @tailwindcss/cli canonicalize --format json "py-3 p-1 px-3"
  # [{ "input": "py-3 p-1 px-3", "output": "p-3", "changed": true }]
  

  Use --stream to process stdin line-by-line without buffering:

  npx @tailwindcss/cli canonicalize --stream
  

Verify

• Confirm class strings still express the same visual intent after canonicalization.
• Run relevant lint, typecheck, or formatting commands when available.