Editor & Tooling

The official tooling makes utility-first pleasant — autocomplete, hover previews, and automatic class sorting.

4 min read Level 1/5 #tailwind#tooling#dx

What you'll learn

Install the Tailwind CSS IntelliSense extension
Add the Prettier plugin for class sorting
Know the canonical class-sorting order

Long class lists are only painful without tooling. The official extensions turn them into autocompleted, auto-sorted, linted strings.

Tailwind CSS IntelliSense

Install the Tailwind CSS IntelliSense extension for VS Code (or the equivalent for your editor). It gives you:

Autocomplete for every utility, including your @theme customizations.
Color swatches next to color classes.
Hover-to-preview the exact generated CSS for any class.
Linting that flags conflicting or invalid classes.

It understands v4’s CSS-first config automatically — there is no tailwind.config.js for it to read, so it reads your CSS.

Automatic Class Sorting

Inconsistent class order makes diffs noisy and code reviews harder. The official Prettier plugin sorts them for you:

npm install -D prettier prettier-plugin-tailwindcss

// prettier.config.js
export default {
  plugins: ['prettier-plugin-tailwindcss'],
}

On save, every class list snaps to one canonical order: roughly layout → box model → typography → visual → misc, with variants grouped. You stop thinking about ordering entirely, and diffs only show real changes.

Sorting Custom Helpers

If you wrap classes in a helper like clsx() or a cn() utility, tell the plugin where to look so those strings get sorted and linted too:

export default {
  plugins: ['prettier-plugin-tailwindcss'],
  tailwindFunctions: ['clsx', 'cn'],
}

With IntelliSense plus sorting configured, utility-first feels less like typing and more like picking from a menu.

Display Utilities →