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.
In addition it sorts the classes logically, removes unnecessary whitespaces and duplicate classes and groups the classes by their variants. It works in jsx, svelte, vue, and html files.
Buy me a coffee | GitHub Sponsors
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:
Two predefined configurations are available that contain the recommended rules:
error - will throw an error if the rule is violatedwarning - will throw a warning if the rule is violatedThe following table shows the available rules and if they are enabled by default in the different configurations:
| 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.
All 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"
}
}
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.