Registry / devops / prettier-plugin-tailwind-styled-components

prettier-plugin-tailwind-styled-components

library2.0.2jsnpmunverified

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

devops web-framework

npm install prettier-plugin-tailwind-styled-components

github ↗package ↗

INSTALL

IMPORT

SIG · PRETTIER-PLUGIN-TA

prettier-plugin-tailwind-styled-components

devopsjavascriptv2.0.2

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

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

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

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

plugins

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

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

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

tailwindFunctions

✓ { "tailwindFunctions": ["tw"] }

✗ { "tailwindFunctions": "tw" }

Option must be an array of function names, not a single string.

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

Debug

Known issues

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

affects: >=2.0.0

breakingv1.0.0 dropped Tailwind CSS v2 support; only v3 and v4 are supported.

fix

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

affects: >=1.0.0

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

fix

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

affects: >=1.0.0

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

affects: >=0.0.1

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

affects: >=0.5.0

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

fix

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

affects: >=0.0.1

Errors

Common errors & fixes

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

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

fix

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

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

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

fix

Either remove the option or use `tailwindConfig` for Tailwind v3.

TypeError: prettier.__debug is not a function

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

fix

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

Upgrade

Version history

2.0.2latest on npm

Audit

Dependencies

prettierrequiredPeer dependency – required to load the plugin

prettier-plugin-tailwindcssrequiredPeer dependency – core sorting logic depends on this plugin

tailwind-styled-componentsoptionalOptional peer dep – only needed if you use tailwind-styled-components (react/react-dom also needed)

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/dimitribarbot/prettier-plugin-tailwind-styled-components ↗

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