eslint-plugin-readable-tailwind
TypeScript icon, indicating that this package has built-in type declarations

1.5.2 • Public • Published
eslint-plugin-readable-tailwind logo

GitHub license npm version GitHub issues npm weekly downloads GitHub repo stars GitHub workflow status




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.



eslint-plugin-readable-tailwind example


eslint-plugin-readable-tailwind logo

This project is financed by the community.
If you or your company benefit from this project, please consider becoming a sponsor.
Your contribution will help me maintain and develop the project.



Installation

npm i -D eslint-plugin-readable-tailwind

Quick start

  1. Check out the Parsers section below to see how to configure the plugin for your specific flavor.
  2. Read the Rules section to learn about the available rules and how to configure them.
  3. Read the Utilities section to see which tailwind utilities are supported out of the box and how to extend the default configuration.
  4. 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:



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.


Utilities

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.



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:

{
  // enable ESLint to fix tailwind classes on save
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  // optional: if you want to use the new flat config format
  "eslint.experimental.useFlatConfig": true
}


🩷 Sponsored by the following awesome people and organizations

No awesome people or organizations have sponsored this project yet.

Package Sidebar

Install

npm i eslint-plugin-readable-tailwind

Weekly Downloads

3,679

Version

1.5.2

License

MIT

Unpacked Size

476 kB

Total Files

269

Last publish

Collaborators

  • schoero