{"id":20421,"library":"prettier-plugin-sort-class-names","title":"Prettier Plugin Sort Class Names","description":"A Prettier plugin that sorts HTML class attributes alphabetically or with a custom order file. Version 3.0.1 supports HTML, CSS @apply, JSX/TSX, and twin.macro. It automatically detects the plugin when installed alongside Prettier 2.x. Unlike similar tools (e.g., prettier-plugin-tailwindcss), this plugin offers flexible ordering via an external file and custom prefixes for responsive variants. Maintenance is community-driven.","status":"active","version":"3.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/PutziSan/prettier-plugin-sort-class-names","tags":["javascript","prettier","plugin","tailwindcss","sort","order"],"install":[{"cmd":"npm install prettier-plugin-sort-class-names","lang":"bash","label":"npm"},{"cmd":"yarn add prettier-plugin-sort-class-names","lang":"bash","label":"yarn"},{"cmd":"pnpm add prettier-plugin-sort-class-names","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for the plugin to function.","package":"prettier","optional":false}],"imports":[{"note":"Plugin is auto-loaded when installed; manual require only needed for Yarn 2.","wrong":"require('prettier-plugin-sort-class-names') in config","symbol":"default","correct":"/* no explicit import needed; plugin auto-detected */"},{"note":"Option defined in Prettier config, not imported.","wrong":"import sortClassNamesOrderFile from '...'","symbol":"sortClassNamesOrderFile","correct":"// set in prettier config: module.exports = { sortClassNamesOrderFile: './my-order.txt' }"},{"note":"Option string set in Prettier config.","wrong":"import { sortClassNamesPrefixes } from 'prettier-plugin-sort-class-names'","symbol":"sortClassNamesPrefixes","correct":"// set in prettier config: module.exports = { sortClassNamesPrefixes: 'xs:,sm:,md:' }"}],"quickstart":{"code":"npm install prettier prettier-plugin-sort-class-names --save-dev\necho 'div.flex.items-center>p' > test.html\n# prettier auto-formats sorting class attributes alphabetically\nnpx prettier test.html\n# output: <div class=\"flex items-center\"><p></p></div>","lang":"typescript","description":"Installs the plugin and shows it sorts classes alphabetically in an HTML file."},"warnings":[{"fix":"Use only one class-sorting plugin to avoid conflicting sorts.","message":"Migrating from prettier-plugin-tailwindcss may conflict.","severity":"breaking","affected_versions":">=3.0"},{"fix":"Use a prettier.config.js file with plugins: [require('prettier-plugin-sort-class-names')].","message":"Yarn 2 (PnP) does not auto-detect the plugin; require() in config fails.","severity":"gotcha","affected_versions":">=2.0"},{"fix":"Use an absolute path or ensure process.cwd() is set correctly.","message":"Custom order file path resolved relative to Prettier's working directory, not the config file.","severity":"gotcha","affected_versions":"all"},{"fix":"Set sortClassNamesUnknownClassesSeparator: '' in config to disable.","message":"Unknown classes are separated from known by ' / ' by default, which may break existing class selectors.","severity":"gotcha","affected_versions":"all"},{"fix":"Consider using a fork or updating if plugin supports Prettier 3.","message":"Prettier peer dependency was '2.x'; compatibility with Prettier 3 is not guaranteed.","severity":"deprecated","affected_versions":"3.0.1"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Install the plugin or add require('prettier-plugin-sort-class-names') in prettier.config.js plugins array.","cause":"Plugin not installed or Yarn 2 auto-detection fails.","error":"Error: Cannot find module 'prettier-plugin-sort-class-names'"},{"fix":"Downgrade to Prettier 2.x or use a compatible plugin version.","cause":"Prettier version incompatible (e.g., Prettier 3 with plugin requiring Prettier 2).","error":"TypeError: Cannot read properties of undefined (reading 'sort')"},{"fix":"Set option as string: 'sm:,md:,lg:'.","cause":"Option provided as list or object instead of comma-separated string.","error":"The 'sortClassNamesPrefixes' option is not a valid string."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}