Registry / devops / prettier-plugin-tailwindcss

prettier-plugin-tailwindcss

library0.7.3jsnpmunverified

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.

devops web-framework

npm install prettier-plugin-tailwindcss

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · PRETTIER-PLUGIN-TA

prettier-plugin-tailwindcss

devopsjavascriptv0.7.3

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.

plugin (auto-loading)

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

✗ import plugin from 'prettier-plugin-tailwindcss'; // direct import is not needed

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

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>

Debug

Known issues

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

affects: >=0.6.0

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

affects: >=0.7.0

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

fix

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

affects: <0.6.9

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

affects: 0.7.0, 0.7.1

Errors

Common errors & fixes

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

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.

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

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: Must be using Prettier v3.0 or later

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

fix

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

Upgrade

Version history

0.7.3latest on npm

Audit

Dependencies

prettierrequiredpeer dependency required at version ^3.0

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/tailwindlabs/prettier-plugin-tailwindcss ↗

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

homepagehttps://tailwindcss.com ↗