
Research
Security News
The Growing Risk of Malicious Browser Extensions
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
eslint-plugin-readable-tailwind
Advanced tools
auto-wraps tailwind classes after a certain print width or class count into multiple lines to improve readability.
[!WARNING]
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.
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
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.
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"
}
}
v3.0.0
This version adds 3 new correctness rules to the plugin. To better reflect the new scope of the plugin it was renamed from eslint-plugin-readable-tailwind
to eslint-plugin-better-tailwindcss
. https://github.com/schoero/eslint-plugin-readable-tailwind/issues/86#issuecomment-2855845766
The predefined configs also have been renamed to better reflect their scope.
Plugin renamed to eslint-plugin-better-tailwindcss
Deprecate Regex matchers to simplify the configuration. (#98)
Regex matchers were an early attempt to make the plugin more flexible. However, they were quickly replaced with Matchers which work on the Abstract Syntax Tree and are far more powerful. Support for Regex matchers will be removed in the next major version.
warning
and error
configs have been removed. Use recommended-warn
or recommended-error
instead. (#99)
eslint-plugin-readable-tailwind
with eslint-plugin-better-tailwindcss
:npm uninstall eslint-plugin-readable-tailwind
npm i -D eslint-plugin-better-tailwindcss
- import eslintPluginReadableTailwind from "eslint-plugin-readable-tailwind";
+ import eslintPluginBetterTailwindcss from "eslint-plugin-better-tailwindcss";
rules: {
// enable all recommended rules to warn
- ...eslintPluginReadableTailwind.configs.warning.rules,
+ ...eslintPluginBetterTailwindcss.configs["recommended-warn"].rules,
// enable all recommended rules to error
- ...eslintPluginReadableTailwind.configs.error.rules,
+ ...eslintPluginBetterTailwindcss.configs["recommended-error"].rules,
// or configure rules individually
- "readable-tailwind/multiline": ["warn", { printWidth: 100 }]
+ "better-tailwindcss/multiline": ["warn", { printWidth: 100 }]
}
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 12,537 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.
Research
Security News
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.
Security News
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.