{"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.","language":"javascript","status":"active","last_verified":"Sat Apr 25","install":{"commands":["npm install prettier-plugin-tailwindcss"],"cli":null},"imports":["// in .prettierrc: { \"plugins\": [\"prettier-plugin-tailwindcss\"] }","import type { Plugin } from 'prettier-plugin-tailwindcss';","// In .prettierrc.ts: import { tailwindFunctions } from 'prettier-plugin-tailwindcss'; export default { plugins: ['prettier-plugin-tailwindcss'], tailwindFunctions: ['cn', 'clsx', 'tw'] };"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}