schoero
</picture>
readable-tailwind
</picture>
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/v/eslint-plugin-readable-tailwind?style=flat-square&labelColor=32363B&color=ffffff">
<source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/npm/v/eslint-plugin-readable-tailwind?style=flat-square&labelColor=EBEEF2&color=000000">
</picture>
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/issues/schoero/eslint-plugin-readable-tailwind?style=flat-square&labelColor=32363B&color=ffffff">
<source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/issues/schoero/eslint-plugin-readable-tailwind?style=flat-square&labelColor=EBEEF2&color=000000">
</picture>
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/dt/eslint-plugin-readable-tailwind?style=flat-square&labelColor=32363B&color=ffffff">
<source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/npm/dt/eslint-plugin-readable-tailwind?style=flat-square&labelColor=EBEEF2&color=000000">
</picture>
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/stars/schoero/eslint-plugin-readable-tailwind?style=flat-square&labelColor=32363B&color=ffffff">
<source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/stars/schoero/eslint-plugin-readable-tailwind?style=flat-square&labelColor=EBEEF2&color=000000">
</picture>
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/actions/workflow/status/schoero/eslint-plugin-readable-tailwind/ci.yml?event=push&style=flat-square&labelColor=32363B&color=ffffff">
<source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/actions/workflow/status/schoero/eslint-plugin-readable-tailwind/ci.yml?event=push&style=flat-square&labelColor=EBEEF2&color=000000">
</picture>
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 React, Solid.js, Qwik, Svelte, Vue, Angular, HTML, JavaScript and TypeScript projects.
</picture>
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.
Installation
npm i -D eslint-plugin-readable-tailwindQuick start
Follow the parsers section below to learn how to configure the plugin for your specific requirements.
Configure the plugin to be able to read your tailwind configuration via settings or for each rule separately.
// eslint.config.js { //... "settings": { "readable-tailwind": { // tailwindcss 4: the path to the entry file of the css based tailwind config (eg: `src/global.css`) "entryPoint": "src/global.css", // tailwindcss 3: the path to the tailwind config file (eg: `tailwind.config.js`) "tailwindConfig": "tailwind.config.js" } } }Configure your editor to conveniently auto-fix on save.
Parsers
Depending on the flavor you are using, you may need to install and configure the corresponding parser:
- JSX (React, Solid.js, Qwik)
- TSX (React, Solid.js, Qwik) with TypeScript support
- Svelte
- Vue
- HTML
- Angular
- Plain JavaScript
- Plain TypeScript
Rules
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 violated
The 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. | ✔ | ✔ | ✔ |
Utilities
This plugin works out of the box with most popular tailwind utilities:
- tailwind merge
- class variance authority
- tailwind variants
- shadcn
- classcat
- class list builder
- clsx
- cnbuilder
- classnames template literals
- obj str
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.
Editor configuration
VSCode
Auto-fix on save
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"
}
}