ESLint plugin to automatically break up long tailwind class strings into multiple lines based on a specified print width or class count. This improves readability and eliminates horizontal scrolling.
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.
This project is financed by the community.
If you or your company benefit from this project, please consider becoming a sponsor.
Your contribution will help me maintain and develop the project.
npm i -D eslint-plugin-readable-tailwind
Please read the documentation for the specific flavor you are using:
Name | Description | error |
warning |
autofix |
---|---|---|---|---|
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. | ✔ | ✔ | ✔ |
These rules are intended to automatically fix the tailwind classes. If you have installed the VSCode ESLint plugin, you can configure it to automatically fix the classes on save by adding the following options to your .vscode/settings.json
:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
}
}
No awesome people or organizations have sponsored this project yet.