eslint-plugin-better-tailwindcss weekly downloads statistics

eslint-plugin-better-tailwindcss

ESLint/Oxlint plugin with formatting and linting rules to help you write cleaner, more maintainable Tailwind CSS.

The formatting rules focus on improving readability by automatically breaking up long Tailwind class strings into multiple lines and sorting/grouping them in a logical order. The linting rules enforce best practices and catch potential issues, ensuring that you're writing valid Tailwind CSS.

This plugin supports a wide range of projects, including React, Solid.js, Qwik, Svelte, Vue, Astro, Angular, HTML or plain JavaScript or TypeScript.

Buy me a coffee | GitHub Sponsors Help support this project. 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

Quick start

Depending on the flavor you are using, you need to install and configure the corresponding parser:

• React: .jsx · .tsx • SolidJS: .jsx · .tsx • Qwik: .jsx · .tsx • Svelte: .svelte • Vue: .vue • Astro: .astro • Angular: .html, .ts • HTML: .html • CSS: .css • JavaScript: .js • TypeScript: .ts

Rules

The rules are categorized into two types: stylistic and correctness.

Configs

The plugin offers three recommended configurations to help you get started quickly: • stylistic: Enforces stylistic rules for tailwind classes. • correctness: Enforces correctness rules for tailwind classes. • recommended: Enforces both stylistic and correctness rules. By default: • stylistic rules are reported as warnings • correctness rules are reported as errors You can change the severity by adding a suffix to the config name: • Use -error to report all rules as errors • Use -warn to report all rules as warnings For example, recommended-warn will report every rule as a warning and stylistic-error will report the formatting rules as errors. If you still use the old .eslintrc configuration format, you can prefix the config names with legacy-.

For example, legacy-recommended or legacy-correctness-warn.

The table below lists all available rules, the Tailwind CSS versions they support, and whether they are enabled by default in each recommended configuration:

Stylistic rules

| Name | Description | tw3 | tw4 | recommended | autofix |

| enforce-consistent-line-wrapping | Enforce consistent line wrapping for tailwind classes. | ✔ | ✔ | ✔ | ✔ | | enforce-consistent-class-order | Enforce a consistent order for tailwind classes. | ✔ | ✔ | ✔ | ✔ | | enforce-consistent-variant-order | Enforce a consistent variant order for tailwind classes. | | ✔ | | ✔ | | enforce-consistent-variable-syntax | Enforce consistent variable syntax. | ✔ | ✔ | | ✔ | | enforce-consistent-important-position | Enforce consistent position of the important modifier. | ✔ | ✔ | | ✔ | | enforce-shorthand-classes | Enforce shorthand class names. | ✔ | ✔ | | ✔ | | enforce-logical-properties | Enforce logical property class names. | ✔ | ✔ | | ✔ | | enforce-canonical-classes | Enforce canonical class names. | | ✔ | ✔ | ✔ | | no-duplicate-classes | Remove duplicate classes. | ✔ | ✔ | ✔ | ✔ | | no-deprecated-classes | Remove deprecated classes. | | ✔ | ✔ | ✔ | | no-unnecessary-whitespace | Disallow unnecessary whitespace in tailwind classes. | ✔ | ✔ | ✔ | ✔ |

Correctness rules

| Name | Description | tw3 | tw4 | recommended | autofix |

| no-concatenated-classes | Disallow concatenated classes in Tailwind CSS class strings. | ✔ | ✔ | ✔ | | | no-unknown-classes | Report classes not registered with Tailwind CSS. | ✔ | ✔ | ✔ | | | no-conflicting-classes | Report classes that produce conflicting styles. | | ✔ | ✔ | | | no-restricted-classes | Disallow restricted classes. | ✔ | ✔ | | ✔ |

Utilities

This plugin is pre-configured to lint tailwind classes for the most popular utilities:

• tailwind merge: twMerge · twJoin • class variance authority: cva • tailwind variants: tv • shadcn: cn • classcat: cc • class list builder: clb • clsx: clsx • cnbuilder: cnb • classnames template literals: ctl • obj str: objstr • react-twc: twc · twx

Advanced configuration

If an utility is not supported by default, or you want to customize the configuration, you can define which attributes, callees, variables, and tags should get linted. See the Advanced configuration guide to learn how to override or extend the default settings.

Monorepo setup

In monorepos, linting is often started from the repository root while each package has its own Tailwind setup. You can configure settings["better-tailwindcss"].cwd per file group so the plugin resolves tailwindcss and config files from the correct project directory.

See Settings for more details.

Editor configuration

VSCode

Auto-fix on save

Most rules are intended to automatically fix the tailwind classes using VSCode extensions.

ESLint

For ESLint, you can install the VSCode ESLint plugin and configure it to automatically fix the classes on save by adding the following options to your .vscode/settings.json:

Oxlint

For Oxlint, you can install the VSCode Oxc plugin and configure it to automatically fix the classes on save by adding the following options to your .vscode/settings.json:

Description from the npm listing.