Registry / web-framework / prettier-plugin-sort-class-names

prettier-plugin-sort-class-names

library3.0.1jsnpmunverified

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.

web-framework

npm install prettier-plugin-sort-class-names

github ↗package ↗

INSTALL

IMPORT

SIG · PRETTIER-PLUGIN-SO

prettier-plugin-sort-class-names

web-frameworkjavascriptv3.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

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

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

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

sortClassNamesOrderFile

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

✗ import sortClassNamesOrderFile from '...'

Option defined in Prettier config, not imported.

sortClassNamesPrefixes

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

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

Option string set in Prettier config.

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>

Debug

Known issues

breakingMigrating from prettier-plugin-tailwindcss may conflict.

fix

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

affects: >=3.0

gotchaYarn 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')].

affects: >=2.0

gotchaCustom 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.

affects: all

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

fix

Set sortClassNamesUnknownClassesSeparator: '' in config to disable.

affects: all

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

fix

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

affects: 3.0.1

Errors

Common errors & fixes

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

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.

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

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

fix

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

The 'sortClassNamesPrefixes' option is not a valid string.

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

fix

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

Upgrade

Version history

3.0.1latest on npm

Audit

Dependencies

prettierrequiredPeer dependency required for the plugin to function.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/PutziSan/prettier-plugin-sort-class-names ↗

packagehttps://www.npmjs.com/package/prettier-plugin-sort-class-names ↗