{"id":20437,"library":"prettier-plugin-tailwind-css","title":"Prettier Tailwind CSS Plugin","description":"A Prettier plugin that automatically sorts Tailwind CSS utility classes in a consistent order and removes duplicates, version 1.5.0 (last release Feb 2021). It works with HTML, JS, JSX, TS, TSX, Vue, and since v1.5.0 also CSS/SCSS/LESS. The plugin is stable but no longer actively maintained (no releases since 2021). Compared to alternatives like `prettier-plugin-tailwindcss` (official), this plugin is older, less popular, and has fewer features (no Tailwind v3+ support confirmed). It offers configurable class sorting and deduplication via options `removeDuplicatesClasses`, `classRegex`, and `classSorter`.","status":"maintenance","version":"1.5.0","language":"javascript","source_language":"en","source_url":"https://github.com/marcosvega91/prettier-tailwind","tags":["javascript"],"install":[{"cmd":"npm install prettier-plugin-tailwind-css","lang":"bash","label":"npm"},{"cmd":"yarn add prettier-plugin-tailwind-css","lang":"bash","label":"yarn"},{"cmd":"pnpm add prettier-plugin-tailwind-css","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required to run as a Prettier plugin","package":"prettier","optional":false}],"imports":[{"note":"This is a Prettier plugin, not a library with exported symbols. Configuration is done in Prettier config file.","wrong":"import prettierPluginTailwind from 'prettier-plugin-tailwind-css'","symbol":"default","correct":"// Not imported directly; installed as a Prettier plugin via prettier.config.js modules: ['prettier-plugin-tailwind-css']"},{"note":"Option is set in Prettier config, not imported.","wrong":"import { removeDuplicatesClasses } from 'prettier-plugin-tailwind-css'","symbol":"removeDuplicatesClasses","correct":"// In .prettierrc: { \"removeDuplicatesClasses\": true }"},{"note":"Path to a JSON file, not a JS module.","wrong":"const regex = require('prettier-plugin-tailwind-css').classRegex","symbol":"classRegex","correct":"// In .prettierrc: { \"classRegex\": \"./custom-regex.json\" }"}],"quickstart":{"code":"// 1. Install plugin\nnpm install --save-dev prettier-plugin-tailwind-css\n\n// 2. Create .prettierrc\n{\n  \"plugins\": [\"prettier-plugin-tailwind-css\"],\n  \"removeDuplicatesClasses\": true\n}\n\n// 3. Create a test HTML file: index.html\n<div class=\"mx-auto flex h-16 justify-between items-center max-w-6xl h-16\">\n  <p>Hello World</p>\n</div>\n\n// 4. Run Prettier\nnpx prettier --write index.html\n\n// Output:\n<div class=\"flex items-center justify-between h-16 max-w-6xl mx-auto\">\n  <p>Hello World</p>\n</div>","lang":"javascript","description":"Demonstrates installation, configuration, and output of sorting Tailwind classes with the plugin."},"warnings":[{"fix":"Migrate to 'prettier-plugin-tailwindcss' or '@trivago/prettier-plugin-tailwindcss' and adjust configuration.","message":"This package is no longer actively maintained; consider using @trivago/prettier-plugin-tailwindcss (official) for newer Tailwind versions.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"If using Tailwind v3+, prefer the official plugin 'prettier-plugin-tailwindcss' which supports Tailwind v3+.","message":"The plugin may not work with Tailwind CSS v3+ because the class sorting order changed. Test thoroughly.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Set 'removeDuplicatesClasses': false to preserve duplicates.","message":"Option 'removeDuplicatesClasses' defaults to true, which removes duplicate classes silently. In rare cases you might want to keep duplicates for specificity.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Create separate JSON files and reference them correctly.","message":"Custom 'classRegex' and 'classSorter' must be paths to JSON files, not inline objects. Relative paths are resolved from the project root.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install --save-dev prettier-plugin-tailwind-css and add \"plugins\": [\"prettier-plugin-tailwind-css\"] to .prettierrc","cause":"Plugin not installed or not listed in Prettier config's plugins array.","error":"Cannot find module 'prettier-plugin-tailwind-css'"},{"fix":"Create a minimal 'tailwind.config.js' (even empty) in your project root, or ensure Tailwind is installed.","cause":"The plugin expects a Tailwind config at 'tailwind.config.js' or default; if not found, it may fail silently or throw.","error":"TypeError: Cannot read properties of undefined (reading 'tailwind')"},{"fix":"Add \"overrides\": [{ \"files\": \"*.vue\", \"options\": { \"parser\": \"vue\" } }] to .prettierrc","cause":"By default Prettier may not associate .vue files with this plugin. Need to set parser or use proper Prettier config.","error":"File not formatted: .vue files not recognized"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}