TW Class Sort (Prettier)
A VS Code extension that automatically sorts Tailwind CSS classes in the recommended order using prettier-plugin-tailwindcss. No Prettier setup required — just install and run.
Features
- Sort Command — Run
Sort Tailwind CSS Classes from the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
- Format on Save — Optionally auto-sort classes every time you save a file
- Tailwind v4 & v3 — Supports both Tailwind CSS v4 (CSS-based config via
@import "tailwindcss") and v3 (tailwind.config.js)
- Utility Functions — Sorts classes inside
clsx(), cn(), cva(), tw(), and any custom functions you configure
- Multi-language — Works with HTML, JSX, TSX, Vue, Svelte, Astro, and PHP files
- Respects Your Config — Reads your existing
.prettierrc to preserve code style; only class order changes
Usage
- Open a file containing Tailwind CSS classes.
- Open the Command Palette (
Ctrl+Shift+P / Cmd+Shift+P).
- Run Sort Tailwind CSS Classes.
Enable automatic sorting on save in your VS Code settings:
{
"tailwindClassSorter.formatOnSave": true
}
Extension Settings
| Setting |
Type |
Default |
Description |
tailwindClassSorter.formatOnSave |
boolean |
false |
Automatically sort Tailwind CSS classes on file save |
tailwindClassSorter.tailwindStylesheet |
string |
"" |
(Tailwind v4) Path to your Tailwind CSS entry point (e.g. ./src/app.css). Leave empty for auto-detection |
tailwindClassSorter.tailwindConfigPath |
string |
"" |
(Tailwind v3) Path to tailwind.config.js (relative to workspace root). Leave empty for auto-detection |
tailwindClassSorter.tailwindFunctions |
string[] |
["clsx", "cn", "cva", "tw"] |
Function names whose arguments should have their Tailwind classes sorted |
tailwindClassSorter.tailwindAttributes |
string[] |
["class", "className"] |
HTML/JSX attributes whose values should have their Tailwind classes sorted |
Example
Before:
<div class="p-4 flex bg-white items-center shadow-lg rounded-lg justify-between">Hello</div>
After:
<div class="flex items-center justify-between rounded-lg bg-white p-4 shadow-lg">Hello</div>
How It Works
This extension uses prettier-plugin-tailwindcss under the hood to sort your classes into Tailwind's recommended order. It bundles Prettier and the plugin internally — you don't need to install or configure either in your project.
The sorting follows the same order as Tailwind's official Prettier plugin: layout utilities first (like flex, grid), then spacing, sizing, typography, backgrounds, borders, effects, and finally state modifiers (hover:, focus:, dark:, etc.).
Requirements
- VS Code 1.85.0 or later
- A project using Tailwind CSS v4 or v3
Contributing
Found a bug or have a feature request? Open an issue on GitHub.
Pull requests are welcome!
License
MIT — made by @mr-kasper
