Tw Class Sort

mr-kasper
1

VS Code extension to automatically sort Tailwind CSS classes in HTML, JSX, TSX, Vue, Svelte, and more, using Prettier.

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.

Format on Save

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

Top categories