eslint-plugin-readable-tailwind

---

---

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.

Installation

npm i -D eslint-plugin-readable-tailwind

Usage

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

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

Rules

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.	✔	✔	✔

Editor configuration

VSCode

Auto-fix on save

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"
  }
}

🩷 Sponsored by the following awesome people and organizations

No awesome people or organizations have sponsored this project yet.