Prettier Tailwind CSS Plugin

1.5.0 verified Sat Apr 25 auth: no javascript maintenance

A Prettier plugin that automatically sorts Tailwind CSS utility classes in a consistent order and removes duplicates, version 1.5.0 (last release Feb 2021). It works with HTML, JS, JSX, TS, TSX, Vue, and since v1.5.0 also CSS/SCSS/LESS. The plugin is stable but no longer actively maintained (no releases since 2021). Compared to alternatives like `prettier-plugin-tailwindcss` (official), this plugin is older, less popular, and has fewer features (no Tailwind v3+ support confirmed). It offers configurable class sorting and deduplication via options `removeDuplicatesClasses`, `classRegex`, and `classSorter`.

Common errors

error Cannot find module 'prettier-plugin-tailwind-css' ↓

cause Plugin not installed or not listed in Prettier config's plugins array.

fix

npm install --save-dev prettier-plugin-tailwind-css and add "plugins": ["prettier-plugin-tailwind-css"] to .prettierrc

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

cause The plugin expects a Tailwind config at 'tailwind.config.js' or default; if not found, it may fail silently or throw.

fix

Create a minimal 'tailwind.config.js' (even empty) in your project root, or ensure Tailwind is installed.

error File not formatted: .vue files not recognized ↓

cause By default Prettier may not associate .vue files with this plugin. Need to set parser or use proper Prettier config.

fix

Add "overrides": [{ "files": "*.vue", "options": { "parser": "vue" } }] to .prettierrc

Warnings

deprecated This package is no longer actively maintained; consider using @trivago/prettier-plugin-tailwindcss (official) for newer Tailwind versions. ↓

fix Migrate to 'prettier-plugin-tailwindcss' or '@trivago/prettier-plugin-tailwindcss' and adjust configuration.

gotcha The plugin may not work with Tailwind CSS v3+ because the class sorting order changed. Test thoroughly. ↓

fix If using Tailwind v3+, prefer the official plugin 'prettier-plugin-tailwindcss' which supports Tailwind v3+.

gotcha Option 'removeDuplicatesClasses' defaults to true, which removes duplicate classes silently. In rare cases you might want to keep duplicates for specificity. ↓

fix Set 'removeDuplicatesClasses': false to preserve duplicates.

gotcha Custom 'classRegex' and 'classSorter' must be paths to JSON files, not inline objects. Relative paths are resolved from the project root. ↓

fix Create separate JSON files and reference them correctly.

Install

npm install prettier-plugin-tailwind-css

yarn add prettier-plugin-tailwind-css

pnpm add prettier-plugin-tailwind-css

Imports

default

wrong

import prettierPluginTailwind from 'prettier-plugin-tailwind-css'

correct

// Not imported directly; installed as a Prettier plugin via prettier.config.js modules: ['prettier-plugin-tailwind-css']

This is a Prettier plugin, not a library with exported symbols. Configuration is done in Prettier config file.

removeDuplicatesClasses

wrong

import { removeDuplicatesClasses } from 'prettier-plugin-tailwind-css'

correct

// In .prettierrc: { "removeDuplicatesClasses": true }

Option is set in Prettier config, not imported.

classRegex

wrong

const regex = require('prettier-plugin-tailwind-css').classRegex

correct

// In .prettierrc: { "classRegex": "./custom-regex.json" }

Path to a JSON file, not a JS module.

Quickstart

Demonstrates installation, configuration, and output of sorting Tailwind classes with the plugin.

// 1. Install plugin
npm install --save-dev prettier-plugin-tailwind-css

// 2. Create .prettierrc
{
  "plugins": ["prettier-plugin-tailwind-css"],
  "removeDuplicatesClasses": true
}

// 3. Create a test HTML file: index.html
<div class="mx-auto flex h-16 justify-between items-center max-w-6xl h-16">
  <p>Hello World</p>
</div>

// 4. Run Prettier
npx prettier --write index.html

// Output:
<div class="flex items-center justify-between h-16 max-w-6xl mx-auto">
  <p>Hello World</p>
</div>