ESLint plugin to automatically break up long tailwind class strings into multiple lines at a certain printWith or class count for better readability. It also sorts the classes logically, removes unnecessary whitespaces and groups the classes by their modifiers. It works in jsx, svelte, vue, and html files and is designed to work well with and without prettier.

npm i -D eslint-plugin-readable-tailwind

Please read the documentation for the specific flavor you are using:

• JSX/TSX (React, Qwik, Solid, etc.)
• Svelte
• Vue
• HTML

💼 Configurations enabled in.
⚠️ Configurations set to warn in.
Set in the error configuration.
Set in the warning configuration.
🔧 Automatically fixable by the --fix CLI option.

Name	Description	💼	⚠️	🔧
multiline	Enforce consistent line wrapping for tailwind classes.			🔧
no-unnecessary-whitespace	Disallow unnecessary whitespace in tailwind classes.			🔧
sort-classes	Enforce a consistent order for tailwind classes.			🔧