PutziSan / prettier-plugin-sort-class-names

Sort classes in HTML and JSX/TSX with Prettier.

prettier-plugin-sort-class-names

Per default it will sort your class names alphabetically.

install

Prettier should already be set up for your project (check prettier docs). After that it is enough to install prettier-plugin-sort-class-names in the same project, it will be applied automatically.

npm i prettier-plugin-sort-class-names --save-dev
# or with yarn
yarn add prettier-plugin-sort-class-names --dev

If you are using yarn 2 (aka Plug'n'Play/PnP, aka "berry"), check the troubleshooting section at the bottom

prettier-plugin-sort-class-names-order

You can create a file prettier-plugin-sort-class-names-order where every line represents a class name. The higher up a class is in the list, the further forward it is sorted. Example:

flex
block
align-items-center

With this sorting-file, a node like

<div class="custom-class md:flex align-items-center block"></div>

will become

<div class="custom-class / block align-items-center md:flex"></div>

existing order-lists

• tailwind with default config

custom prettier options

you can add this options to your prettier config file:

option	description	default
sortClassNamesOrderFile	Path to your custom prettier-plugin-sort-class-names-order file, if you not define anything, it will sort the class names alphabetically.	"prettier-plugin-sort-class-names-order"
sortClassNamesPrefixes	comma seperated list of your prefixes. Prefixes will be grouped together wenn sorting.	"sm:,md:,lg:,xl:"
sortClassNamesUnknownClassesSeparator	When your class list contains known (in your order-file) and unknown class names, it will be separated by this char. You can disable this by providing an empty string as option ("")	"/"
sortClassNamesClassAttributes	Comma separated list of JSX attributes to sort tailwind classes in.	"class,className,tw"
sortClassNamesSortFunctions	Comma separated list of function names to sort classes in arguments.	"clsx,classNames,cx"

parser support

Supports

• HTML
• CSS (@apply directive)
• JSX, TSX
• twin.marco

troubleshooting

plugin is not automatically detected with yarn 2

1. make sure to use prettier.config.js (if you are currently using .prettierrc et al you have to change to the js-variant)
2. add the plugins section:

module.exports = {
	plugins: [require('prettier-plugin-sort-class-names')],
	// ... your other config-keys like:
	printWidth: 120,
}

check prettier issue #7073 for more information

special thanks

To Acidic9 and his package prettier-plugin-tailwind.

If you want to sort your tailwind class names, you should give this package a shot and come back if you want to extend it with custom class names.