prettier-plugin-tailwind-styled-components

2.0.2 verified Sat Apr 25 auth: no javascript

Prettier plugin for sorting Tailwind CSS classes in tailwind-styled-components template literals. Current stable version 2.0.2 (Feb 2026), requires Node >=20.19 and Prettier ^3.0. Built on top of the official prettier-plugin-tailwindcss, it extends class sorting to tagged template literals used by tailwind-styled-components. Supports Tailwind CSS v3 and v4, custom tailwindConfig/tailwindStylesheet paths, duplicate class preservation, and custom function names. ESM-only; no CJS support. Release cadence: irregular, with breaking changes in v2.0 (made tailwind-styled-components optional peer dep).

Common errors

error Error: Couldn't resolve plugin "prettier-plugin-tailwind-styled-components". The plugin is probably not installed. ↓

cause Missing peer dependency `prettier-plugin-tailwindcss` or the plugin itself.

fix

Run npm install -D prettier-plugin-tailwindcss prettier-plugin-tailwind-styled-components.

error [WARN] Ignored unknown option "tailwindStylesheet" - did you mean "tailwindConfig"? ↓

cause Using `tailwindStylesheet` with Tailwind CSS v3 (option only for v4).

fix

Either remove the option or use tailwindConfig for Tailwind v3.

error TypeError: prettier.__debug is not a function ↓

cause Using an older version of Prettier (v2) which does not support the required API.

fix

Upgrade Prettier to v3+ (npm install -D prettier@^3).

Warnings

breaking v2.0.0 made `tailwind-styled-components` an optional peer dependency. If you rely on v1 behavior, ensure you have `tailwind-styled-components` installed explicitly. ↓

fix Run `npm install -D tailwind-styled-components react react-dom` if you use tailwind-styled-components.

breaking v1.0.0 dropped Tailwind CSS v2 support; only v3 and v4 are supported. ↓

fix Upgrade to Tailwind CSS v3+ or stay on v0.x.

deprecated The `tailwindConfig` option is deprecated for Tailwind CSS v4; use `tailwindStylesheet` instead. ↓

fix Remove `tailwindConfig` and add `"tailwindStylesheet": "./path/to/app.css"`.

gotcha Plugin order in .prettierrc plugins array is critical – wrong order causes the plugin not to apply. ↓

fix Ensure `prettier-plugin-tailwind-styled-components` appears after `prettier-plugin-tailwindcss`.

gotcha Plugin is ESM-only since v0.5.x; cannot be loaded via require(). CJS projects must update. ↓

fix Ensure your project uses ESM (e.g., `type: "module"` in package.json) or use Prettier CLI with `--config`.

gotcha Duplicate classes are removed by default; this can break templating languages like Blade or Fluid. ↓

fix Set `"tailwindPreserveDuplicates": true` in .prettierrc.

Install

npm install prettier-plugin-tailwind-styled-components

yarn add prettier-plugin-tailwind-styled-components

pnpm add prettier-plugin-tailwind-styled-components

Imports

default

wrong

const plugin = require('prettier-plugin-tailwind-styled-components')

correct

// Plugin is loaded via .prettierrc plugins array; no JS import needed

Do NOT import the plugin in your code. It is configured in .prettierrc as a string in the plugins array.

plugins

wrong

{
  "plugins": [
    "prettier-plugin-tailwind-styled-components",
    "prettier-plugin-tailwindcss"
  ]
}

correct

{
  "plugins": [
    "prettier-plugin-tailwindcss",
    "prettier-plugin-tailwind-styled-components"
  ]
}

Order matters: prettier-plugin-tailwind-styled-components must come AFTER prettier-plugin-tailwindcss.

tailwindFunctions
wrong
```
{
  "tailwindFunctions": "tw"
}
```
correct
```
{
  "tailwindFunctions": ["tw"]
}
```
Option must be an array of function names, not a single string.

Quickstart

Install the plugin, configure .prettierrc with both plugins (order matters), and format a tailwind-styled-components tagged template literal.

// 1. Install dependencies
// npm install -D prettier prettier-plugin-tailwindcss prettier-plugin-tailwind-styled-components

// 2. Create .prettierrc
{
  "plugins": [
    "prettier-plugin-tailwindcss",
    "prettier-plugin-tailwind-styled-components"
  ],
  "tailwindFunctions": ["tw"]
}

// 3. Write a component (example: Button.tsx)
import tw from "tailwind-styled-components";

export const Button = tw.button`
  px-4 py-2
  bg-blue-500
  text-white
  rounded
  hover:bg-blue-600
  focus:outline-none
`;

// 4. Run Prettier
// npx prettier --write Button.tsx
// Output: classes sorted according to Tailwind's recommended order