prettier-plugin-tailwindcss

0.7.3 verified Sat Apr 25 auth: no javascript

Prettier plugin that automatically sorts utility classes in Tailwind CSS projects using the official class ordering from Tailwind. Current stable version is 0.7.3 (November 2024), with frequent releases addressing compatibility with the latest Prettier and Tailwind versions. It works with Tailwind v3 and v4, supports TypeScript configs, and integrates with many other Prettier plugins like prettier-plugin-svelte, prettier-plugin-astro, and @ianvs/prettier-plugin-sort-imports. Key differentiator: it is developed by the Tailwind CSS team, ensuring the sort order matches the official Tailwind CSS IntelliSense extension. Requires Node.js >=20.19 and Prettier ^3.0.

Common errors

error Error: Cannot find module 'prettier-plugin-tailwindcss' ↓

cause The plugin is not installed, or not listed in Prettier plugins correctly.

fix

npm install -D prettier-plugin-tailwindcss and add '"plugins": ["prettier-plugin-tailwindcss"]' to .prettierrc.

error TypeError: Cannot read properties of undefined (reading 'stylesheets') ↓

cause Using an unsupported Tailwind CSS version or misconfigured 'tailwindStylesheet' path.

fix

Ensure Tailwind CSS is installed and the stylesheet path is correct. Verify compatibility with Tailwind v4 (v0.6.11+ recommended).

error Error: Must be using Prettier v3.0 or later ↓

cause The plugin requires Prettier v3, but an older version is installed.

fix

Update Prettier to v3: npm install -D prettier@^3.0.0

Warnings

breaking Requires Prettier v3.0 or later. If you use Prettier v2, formatting will fail silently or produce errors. ↓

fix Update Prettier to >=3.0. Prettier v2 users should stay on v0.5.x.

breaking Requires Node.js >=20.19 starting from v0.7.0. Older Node versions cause crashes on install or runtime. ↓

fix Upgrade Node.js to >=20.19 or pin to v0.6.x.

deprecated The 'tailwindEntryPoint' option is deprecated and will be removed. Use 'tailwindStylesheet' instead since v0.6.9. ↓

fix Replace 'tailwindEntryPoint' with 'tailwindStylesheet' in your Prettier config.

gotcha If you use this plugin alongside 'prettier-plugin-svelte' (>=3.7), you may encounter class sorting breaking or duplication. A fix was released in v0.7.2. ↓

fix Update to v0.7.2 or later.

Install

npm install prettier-plugin-tailwindcss

yarn add prettier-plugin-tailwindcss

pnpm add prettier-plugin-tailwindcss

Imports

plugin (auto-loading)
wrong
```
import plugin from 'prettier-plugin-tailwindcss'; // direct import is not needed
```
correct
```
// in .prettierrc: { "plugins": ["prettier-plugin-tailwindcss"] }
```
This plugin works via Prettier's plugin system. You don't import it in your JS files; you configure it in your Prettier config file.
types
```
import type { Plugin } from 'prettier-plugin-tailwindcss';
```
TypeScript types for the plugin options (e.g., tailwindFunctions) are exported for use in .prettierrc.ts files.

tailwindFunctions

// In .prettierrc.ts: import { tailwindFunctions } from 'prettier-plugin-tailwindcss'; export default { plugins: ['prettier-plugin-tailwindcss'], tailwindFunctions: ['cn', 'clsx', 'tw'] };

Use to specify custom function names that contain Tailwind class names. Available from v0.5.0+.

Quickstart

Shows how to configure the plugin in .prettierrc and the sorting behavior on a Tailwind class attribute.

// .prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"],
  // Optional: specify custom function names that receive class strings
  "tailwindFunctions": ["cn", "clsx", "tw"],
  // Optional: specify a custom stylesheet path (v0.6.9+)
  "tailwindStylesheet": "./src/styles/globals.css"
}

// Example input
<div class="px-2 py-1 bg-gray-200 hover:bg-gray-300 rounded"></div>

// Example output (sorted)
<div class="rounded bg-gray-200 px-2 py-1 hover:bg-gray-300"></div>