prettier-plugin-tailwindcss

If you are using a JavaScript-based Prettier configuration (e.g., prettier.config.js), you can import types for IntelliSense support.

// prettier.config.js

/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
export default {
  plugins: ["prettier-plugin-tailwindcss"],
}

Install prettier-plugin-tailwindcss and prettier as dev-dependencies using npm. Then, register the plugin in your Prettier configuration file (e.g., .prettierrc).

npm install -D prettier prettier-plugin-tailwindcss

// .prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Because this plugin uses specific Prettier APIs, it must be loaded last in your plugins array to maintain compatibility with other plugins (like prettier-plugin-svelte or prettier-plugin-organize-imports).

// .prettierrc
{
  "plugins": [
    "prettier-plugin-svelte",
    "prettier-plugin-organize-imports",
    "prettier-plugin-tailwindcss" // MUST come last
  ]
}

The prettier-plugin-tailwindcss plugin supports class sorting across a wide variety of parsers and frameworks. It automatically detects and applies transformations for:

• HTML/Web: HTML, Angular, Vue, LWC, Astro, Glimmer, Marko, Pug, Twig, and Svelte.
• JavaScript/TypeScript: Babel, Babel-flow, Babel-ts, TypeScript, Meriyah, Acorn, Flow, OXC, OXC-TS, and Hermes.
• CSS: CSS, SCSS, and Less.

For many frameworks, the plugin handles both static attributes (e.g., class) and dynamic attributes (e.g., :class in Vue, [ngClass] in Angular, or class:list in Astro).

The plugin normally removes unnecessary whitespace. To keep existing whitespace surrounding classes, set tailwindPreserveWhitespace to true.

// .prettierrc
{
  "tailwindPreserveWhitespace": true,
}

By default, the plugin sorts class, className, :class, [ngClass], and @apply. To sort additional attributes, provide an array of attribute names to tailwindAttributes. You can also use regular expressions enclosed in forward slashes (e.g., /data-.*/) to match multiple attributes.

// .prettierrc
{
  "tailwindAttributes": ["myClassList", "/data-.*/"]
}

When using Tailwind CSS v4, you must specify your CSS file entry point (which contains your theme and custom utilities) using the tailwindStylesheet option. Paths are resolved relative to the Prettier configuration file.

// .prettierrc
{
  "tailwindStylesheet": "./resources/css/app.css"
}

To ensure class sorting accounts for project customizations, specify your tailwind.config.js path using the tailwindConfig option. If not specified, the plugin looks in the same directory as the Prettier config. Paths are resolved relative to the Prettier configuration file.

// .prettierrc
{
  "tailwindConfig": "./styles/tailwind.config.js"
}

The plugin automatically removes duplicate classes. If this interferes with templating languages (like Fluid or Blade), set tailwindPreserveDuplicates to true to disable this behavior.

// .prettierrc
{
  "tailwindPreserveDuplicates": true,
}

You can use the Tailwind sorting logic programmatically by importing createSorter from prettier-plugin-tailwindcss/sorter. This is useful for sorting HTML class attributes (space-separated strings) or class lists (arrays of strings).

import { createSorter } from 'prettier-plugin-tailwindcss/sorter'

let sorter = await createSorter({
  base: '/path/to/project',
  stylesheetPath: './app.css',
})

// Sort HTML class attributes (space-separated strings)
let sorted = sorter.sortClassAttributes([
  'sm:bg-tomato bg-red-500',
  'p-4 m-2'
])
// Returns: ['bg-red-500 sm:bg-tomato', 'm-2 p-4']

// Sort class lists (arrays of class names)
let sortedLists = sorter.sortClassLists([
  ['sm:bg-tomato', 'bg-red-500'],
  ['p-4', 'm-2']
])
// Returns: [['bg-red-500', 'sm:bg-tomato'], ['m-2 p-4']]