Tailwind OCD
Because your className should read like code, not a panic attack.
Auto-sort Tailwind classes, clean duplicate/conflicting utilities, and reduce PR noise before your reviewer judges your life choices.
Tailwind OCD brings Headwind-style ordering into your workflow by delegating sorting to the official Tailwind CSS IntelliSense command. On top of that, it can remove duplicates and resolve simple class conflicts so your markup stays readable and less... emotionally charged.
Why Tailwind OCD?
Let's be honest. This is not maintainable:
className="mt-4 bg-red-500 hover:text-white p-2 flex-col justify-center align-middle lg:p-4 opacity-50 block"
It works, sure. So does writing SQL in one line. Tailwind OCD gives you deterministic ordering and cleaner utility strings so diffs are smaller, reviews are faster, and future-you is slightly less annoyed.
What It Actually Does
- Sorts classes in
class, className, ngClass, and class:list.
- Scans quoted strings in utility calls like
clsx(), cn(), and classnames() (configurable).
- Optionally removes duplicate utilities.
- Optionally removes simple conflicting utilities by keeping the last one in the same variant scope.
- Supports an ignore marker per line so you can opt out where needed.
Commands
- Tailwind OCD: Sort Tailwind Classes in Current File — manual cleanup for the active editor.
Configuration
tailwindOCD.sortOnSave (default: true) — auto-sort on save.tailwindOCD.dynamicClassFunctions (default: ["clsx", "cn", "classnames"]) — function names to scan.tailwindOCD.cleanDuplicates (default: true) — remove duplicate classes.tailwindOCD.cleanConflicts (default: true) — keep the last utility in simple conflict groups.tailwindOCD.ignoreCommentMarker (default: tailwindocd-ignore) — skip lines containing this marker.
Requirements
Install the official Tailwind CSS IntelliSense extension (bradlc.vscode-tailwindcss).
Why? Because this extension intentionally reuses the official sorter instead of inventing a new, potentially cursed class order.
Quick Start
bun install
bun run compile
Then in VS Code:
- Open a project that uses Tailwind.
- Run Tailwind OCD: Sort Tailwind Classes in Current File.
- Save and enjoy cleaner diffs you can pretend happened naturally.
Building the Extension (VSIX)
Packaging your own VSIX is easy (emotionally recovering from old class strings is not):
bun install
bun run package:vsix
Continuous Integration
CI is handled with GitHub Actions via .github/workflows/package-vsix.yml:
- Builds the extension
- Packages the VSIX
- Uploads artifacts, so your release process involves fewer heroic manual steps
