Registry / devops / prettier-plugin-tailwind-css

prettier-plugin-tailwind-css

library1.5.0jsnpmunverified

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`.

devops

npm install prettier-plugin-tailwind-css

github ↗package ↗

INSTALL

IMPORT

SIG · PRETTIER-PLUGIN-TA

prettier-plugin-tailwind-css

devopsjavascriptv1.5.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

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

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

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

removeDuplicatesClasses

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

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

Option is set in Prettier config, not imported.

classRegex

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

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

Path to a JSON file, not a JS module.

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>

Debug

Known issues

deprecatedThis 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.

affects: >=1.0.0

gotchaThe 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+.

affects: >=1.0.0

gotchaOption '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.

affects: >=1.0.0

gotchaCustom '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.

affects: >=1.0.0

Errors

Common errors & fixes

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

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

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

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.

File not formatted: .vue files not recognized

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

Upgrade

Version history

1.5.0latest on npm

Audit

Dependencies

prettierrequiredPeer dependency required to run as a Prettier plugin

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/marcosvega91/prettier-tailwind ↗

packagehttps://www.npmjs.com/package/prettier-plugin-tailwind-css ↗