eslint-plugin-readable-tailwind
Advanced tools
auto-wraps tailwind classes after a certain print width or class count into multiple lines to improve readability.
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.
This project is financed by the community.
If you or your company benefit from this project, please consider becoming a sponsor or making a one-time donation.
Your contribution will help me to maintain and develop the project.
npm i -D eslint-plugin-readable-tailwind
Depending on the flavor you are using, you may need to install and configure the corresponding parser:
| 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. | ✔ | ✔ | ✔ |
| no-duplicate-classes | Remove duplicate classes. | ✔ |
This plugin works out of the box with most popular tailwind utilities:
In case an utility is not supported or you have built your own, you can change which literals will get linted for each rule. Read the API documentation to learn how to override or extend the default config.
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:
{
// enable ESLint to fix tailwind classes on save
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
// optional: if you want to use the new flat config format
"eslint.experimental.useFlatConfig": true
}
FAQs
auto-wraps tailwind classes after a certain print width or class count into multiple lines to improve readability.
The npm package eslint-plugin-readable-tailwind receives a total of 15,826 weekly downloads. As such, eslint-plugin-readable-tailwind popularity was classified as popular.
We found that eslint-plugin-readable-tailwind demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ECMAScript 2025 introduces Iterator Helpers, Set methods, JSON modules, and more in its latest spec update approved by Ecma in June 2025.
Security News
A new Node.js homepage button linking to paid support for EOL versions has sparked a heated discussion among contributors and the wider community.
Research
North Korean threat actors linked to the Contagious Interview campaign return with 35 new malicious npm packages using a stealthy multi-stage malware loader.