ony3000/prettier-plugin-classnames

A Prettier plugin that wraps verbose class name based on the printWidth option. Useful for things like tailwind or the VA design system util classses.

Summary

prettier-plugin-classnames is a Prettier plugin that wraps long class name strings across multiple lines based on Prettier's printWidth option. It recognizes class and className attributes out of the box and can be extended to handle custom JSX attributes and helper functions like clsx or classNames.

What it is useful for

This plugin helps projects where class lists tend to grow long enough to overflow the configured print width, which is common in utility-first CSS setups such as Tailwind CSS. By wrapping those strings rather than letting them stretch past the line limit, it keeps formatted output consistent and makes diffs easier to review.

It is also useful when a team wants consistent wrapping behavior across non-standard JSX attributes (e.g., a project-specific myClassProp) or across wrapper utilities that combine class names.

How engineers can use it

Install the plugin alongside Prettier:

npm install -D prettier prettier-plugin-classnames

The README notes that versions below 0.4.0 also require installing @prettier/sync.

Add the plugin to your Prettier config. The minimal JSON setup is:

{
  "plugins": ["prettier-plugin-classnames"]
}

To register clsx and a custom attribute, use a JS config:

module.exports = {
  plugins: ['prettier-plugin-classnames'],
  customAttributes: ['myClassProp'],
  customFunctions: ['clsx'],
};

Useful options documented in the README:

• endingPosition ("absolute" by default, or "relative") decides whether wrapped lines end at the file's print width or align to the start of the className attribute. The default changed from relative to absolute in v0.8.0.
• syntaxTransformation (default false, added in v0.7.7) converts wrapped, non-expression class strings into expression syntax. The README notes this transformation is not reversibly formatted.
• classnamesPrintWidth (default undefined, added in v0.10.0) lets you set a separate width for class names.

Documented limitations and caveats:

• The plugin does not support Markdown and MDX, and may unintentionally format class strings inside code blocks of supported languages such as Vue. The README suggests an overrides block that disables the plugin for *.md and *.mdx files.
• Prettier only runs the last plugin that matches a file, so combining this with prettier-plugin-tailwindcss requires chaining them via the author's prettier-plugin-merge.