This plugin has been renamed to eslint-plugin-better-tailwindcss. Please migrate to the new package as this one will no longer receive updates.
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.
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
1npm i -D eslint-plugin-readable-tailwind
Quick 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.
1// eslint.config.js2{
3//...4"settings": {
5"readable-tailwind": {
6// tailwindcss 4: the path to the entry file of the css based tailwind config (eg: `src/global.css`)7"entryPoint": "src/global.css",
8// tailwindcss 3: the path to the tailwind config file (eg: `tailwind.config.js`)9"tailwindConfig": "tailwind.config.js"10 }
11 }
12}
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:
1{
2// enable ESLint to fix tailwind classes on save3"editor.codeActionsOnSave": {
4"source.fixAll.eslint": "explicit"5 }
6}