Prettier Plugin Sort Class Names

3.0.1 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Error: Cannot find module 'prettier-plugin-sort-class-names' ↓

cause Plugin not installed or Yarn 2 auto-detection fails.

fix

Install the plugin or add require('prettier-plugin-sort-class-names') in prettier.config.js plugins array.

error TypeError: Cannot read properties of undefined (reading 'sort') ↓

cause Prettier version incompatible (e.g., Prettier 3 with plugin requiring Prettier 2).

fix

Downgrade to Prettier 2.x or use a compatible plugin version.

error The 'sortClassNamesPrefixes' option is not a valid string. ↓

cause Option provided as list or object instead of comma-separated string.

fix

Set option as string: 'sm:,md:,lg:'.

Warnings

breaking Migrating from prettier-plugin-tailwindcss may conflict. ↓

fix Use only one class-sorting plugin to avoid conflicting sorts.

gotcha Yarn 2 (PnP) does not auto-detect the plugin; require() in config fails. ↓

fix Use a prettier.config.js file with plugins: [require('prettier-plugin-sort-class-names')].

gotcha Custom order file path resolved relative to Prettier's working directory, not the config file. ↓

fix Use an absolute path or ensure process.cwd() is set correctly.

gotcha Unknown classes are separated from known by ' / ' by default, which may break existing class selectors. ↓

fix Set sortClassNamesUnknownClassesSeparator: '' in config to disable.

deprecated Prettier peer dependency was '2.x'; compatibility with Prettier 3 is not guaranteed. ↓

fix Consider using a fork or updating if plugin supports Prettier 3.

Install

npm install prettier-plugin-sort-class-names

yarn add prettier-plugin-sort-class-names

pnpm add prettier-plugin-sort-class-names

Imports

default

wrong

require('prettier-plugin-sort-class-names') in config

correct

/* no explicit import needed; plugin auto-detected */

Plugin is auto-loaded when installed; manual require only needed for Yarn 2.

sortClassNamesOrderFile

wrong

import sortClassNamesOrderFile from '...'

correct

// set in prettier config: module.exports = { sortClassNamesOrderFile: './my-order.txt' }

Option defined in Prettier config, not imported.

sortClassNamesPrefixes

wrong

import { sortClassNamesPrefixes } from 'prettier-plugin-sort-class-names'

correct

// set in prettier config: module.exports = { sortClassNamesPrefixes: 'xs:,sm:,md:' }

Option string set in Prettier config.

Quickstart

Installs the plugin and shows it sorts classes alphabetically in an HTML file.

npm install prettier prettier-plugin-sort-class-names --save-dev
echo 'div.flex.items-center>p' > test.html
# prettier auto-formats sorting class attributes alphabetically
npx prettier test.html
# output: <div class="flex items-center"><p></p></div>