{"id":20441,"library":"prettier-plugin-tailwindcss","title":"prettier-plugin-tailwindcss","description":"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.","status":"active","version":"0.7.3","language":"javascript","source_language":"en","source_url":"https://github.com/tailwindlabs/prettier-plugin-tailwindcss","tags":["javascript","typescript"],"install":[{"cmd":"npm install prettier-plugin-tailwindcss","lang":"bash","label":"npm"},{"cmd":"yarn add prettier-plugin-tailwindcss","lang":"bash","label":"yarn"},{"cmd":"pnpm add prettier-plugin-tailwindcss","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required at version ^3.0","package":"prettier","optional":false}],"imports":[{"note":"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.","wrong":"import plugin from 'prettier-plugin-tailwindcss'; // direct import is not needed","symbol":"plugin (auto-loading)","correct":"// in .prettierrc: { \"plugins\": [\"prettier-plugin-tailwindcss\"] }"},{"note":"TypeScript types for the plugin options (e.g., tailwindFunctions) are exported for use in .prettierrc.ts files.","wrong":null,"symbol":"types","correct":"import type { Plugin } from 'prettier-plugin-tailwindcss';"},{"note":"Use to specify custom function names that contain Tailwind class names. Available from v0.5.0+.","wrong":null,"symbol":"tailwindFunctions","correct":"// In .prettierrc.ts: import { tailwindFunctions } from 'prettier-plugin-tailwindcss'; export default { plugins: ['prettier-plugin-tailwindcss'], tailwindFunctions: ['cn', 'clsx', 'tw'] };"}],"quickstart":{"code":"// .prettierrc\n{\n  \"plugins\": [\"prettier-plugin-tailwindcss\"],\n  // Optional: specify custom function names that receive class strings\n  \"tailwindFunctions\": [\"cn\", \"clsx\", \"tw\"],\n  // Optional: specify a custom stylesheet path (v0.6.9+)\n  \"tailwindStylesheet\": \"./src/styles/globals.css\"\n}\n\n// Example input\n<div class=\"px-2 py-1 bg-gray-200 hover:bg-gray-300 rounded\"></div>\n\n// Example output (sorted)\n<div class=\"rounded bg-gray-200 px-2 py-1 hover:bg-gray-300\"></div>","lang":"javascript","description":"Shows how to configure the plugin in .prettierrc and the sorting behavior on a Tailwind class attribute."},"warnings":[{"fix":"Update Prettier to >=3.0. Prettier v2 users should stay on v0.5.x.","message":"Requires Prettier v3.0 or later. If you use Prettier v2, formatting will fail silently or produce errors.","severity":"breaking","affected_versions":">=0.6.0"},{"fix":"Upgrade Node.js to >=20.19 or pin to v0.6.x.","message":"Requires Node.js >=20.19 starting from v0.7.0. Older Node versions cause crashes on install or runtime.","severity":"breaking","affected_versions":">=0.7.0"},{"fix":"Replace 'tailwindEntryPoint' with 'tailwindStylesheet' in your Prettier config.","message":"The 'tailwindEntryPoint' option is deprecated and will be removed. Use 'tailwindStylesheet' instead since v0.6.9.","severity":"deprecated","affected_versions":"<0.6.9"},{"fix":"Update to v0.7.2 or later.","message":"If 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.","severity":"gotcha","affected_versions":"0.7.0, 0.7.1"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install -D prettier-plugin-tailwindcss and add '\"plugins\": [\"prettier-plugin-tailwindcss\"]' to .prettierrc.","cause":"The plugin is not installed, or not listed in Prettier plugins correctly.","error":"Error: Cannot find module 'prettier-plugin-tailwindcss'"},{"fix":"Ensure Tailwind CSS is installed and the stylesheet path is correct. Verify compatibility with Tailwind v4 (v0.6.11+ recommended).","cause":"Using an unsupported Tailwind CSS version or misconfigured 'tailwindStylesheet' path.","error":"TypeError: Cannot read properties of undefined (reading 'stylesheets')"},{"fix":"Update Prettier to v3: npm install -D prettier@^3.0.0","cause":"The plugin requires Prettier v3, but an older version is installed.","error":"Error: Must be using Prettier v3.0 or later"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}