{"id":20438,"library":"prettier-plugin-tailwind-styled-components","title":"prettier-plugin-tailwind-styled-components","description":"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).","status":"active","version":"2.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/dimitribarbot/prettier-plugin-tailwind-styled-components","tags":["javascript","prettier","tailwind-styled-components","typescript"],"install":[{"cmd":"npm install prettier-plugin-tailwind-styled-components","lang":"bash","label":"npm"},{"cmd":"yarn add prettier-plugin-tailwind-styled-components","lang":"bash","label":"yarn"},{"cmd":"pnpm add prettier-plugin-tailwind-styled-components","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency – required to load the plugin","package":"prettier","optional":false},{"reason":"Peer dependency – core sorting logic depends on this plugin","package":"prettier-plugin-tailwindcss","optional":false},{"reason":"Optional peer dep – only needed if you use tailwind-styled-components (react/react-dom also needed)","package":"tailwind-styled-components","optional":true}],"imports":[{"note":"Do NOT import the plugin in your code. It is configured in .prettierrc as a string in the plugins array.","wrong":"const plugin = require('prettier-plugin-tailwind-styled-components')","symbol":"default","correct":"// Plugin is loaded via .prettierrc plugins array; no JS import needed"},{"note":"Order matters: prettier-plugin-tailwind-styled-components must come AFTER prettier-plugin-tailwindcss.","wrong":"{\n  \"plugins\": [\n    \"prettier-plugin-tailwind-styled-components\",\n    \"prettier-plugin-tailwindcss\"\n  ]\n}","symbol":"plugins","correct":"{\n  \"plugins\": [\n    \"prettier-plugin-tailwindcss\",\n    \"prettier-plugin-tailwind-styled-components\"\n  ]\n}"},{"note":"Option must be an array of function names, not a single string.","wrong":"{\n  \"tailwindFunctions\": \"tw\"\n}","symbol":"tailwindFunctions","correct":"{\n  \"tailwindFunctions\": [\"tw\"]\n}"}],"quickstart":{"code":"// 1. Install dependencies\n// npm install -D prettier prettier-plugin-tailwindcss prettier-plugin-tailwind-styled-components\n\n// 2. Create .prettierrc\n{\n  \"plugins\": [\n    \"prettier-plugin-tailwindcss\",\n    \"prettier-plugin-tailwind-styled-components\"\n  ],\n  \"tailwindFunctions\": [\"tw\"]\n}\n\n// 3. Write a component (example: Button.tsx)\nimport tw from \"tailwind-styled-components\";\n\nexport const Button = tw.button`\n  px-4 py-2\n  bg-blue-500\n  text-white\n  rounded\n  hover:bg-blue-600\n  focus:outline-none\n`;\n\n// 4. Run Prettier\n// npx prettier --write Button.tsx\n// Output: classes sorted according to Tailwind's recommended order","lang":"typescript","description":"Install the plugin, configure .prettierrc with both plugins (order matters), and format a tailwind-styled-components tagged template literal."},"warnings":[{"fix":"Run `npm install -D tailwind-styled-components react react-dom` if you use tailwind-styled-components.","message":"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.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Upgrade to Tailwind CSS v3+ or stay on v0.x.","message":"v1.0.0 dropped Tailwind CSS v2 support; only v3 and v4 are supported.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Remove `tailwindConfig` and add `\"tailwindStylesheet\": \"./path/to/app.css\"`.","message":"The `tailwindConfig` option is deprecated for Tailwind CSS v4; use `tailwindStylesheet` instead.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Ensure `prettier-plugin-tailwind-styled-components` appears after `prettier-plugin-tailwindcss`.","message":"Plugin order in .prettierrc plugins array is critical – wrong order causes the plugin not to apply.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Ensure your project uses ESM (e.g., `type: \"module\"` in package.json) or use Prettier CLI with `--config`.","message":"Plugin is ESM-only since v0.5.x; cannot be loaded via require(). CJS projects must update.","severity":"gotcha","affected_versions":">=0.5.0"},{"fix":"Set `\"tailwindPreserveDuplicates\": true` in .prettierrc.","message":"Duplicate classes are removed by default; this can break templating languages like Blade or Fluid.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npm install -D prettier-plugin-tailwindcss prettier-plugin-tailwind-styled-components`.","cause":"Missing peer dependency `prettier-plugin-tailwindcss` or the plugin itself.","error":"Error: Couldn't resolve plugin \"prettier-plugin-tailwind-styled-components\". The plugin is probably not installed."},{"fix":"Either remove the option or use `tailwindConfig` for Tailwind v3.","cause":"Using `tailwindStylesheet` with Tailwind CSS v3 (option only for v4).","error":"[WARN] Ignored unknown option \"tailwindStylesheet\" - did you mean \"tailwindConfig\"?"},{"fix":"Upgrade Prettier to v3+ (`npm install -D prettier@^3`).","cause":"Using an older version of Prettier (v2) which does not support the required API.","error":"TypeError: prettier.__debug is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}