eslint-plugin-tailwindcss
Rules enforcing best practices and consistency using Tailwind CSS v2.1.1
🎉 Since v1.5.0, the plugin will parse thetailwind.config.js
file and use the correct values based on your own settings.
👍 Most of the new JIT mode features are also supported.
Installation
You'll first need to install ESLint:
$ npm i eslint --save-dev
Next, install eslint-plugin-tailwindcss
:
$ npm i eslint-plugin-tailwindcss --save-dev
eslint-plugin-tailwindcss on npm
Usage
Add tailwindcss
to the plugins section of your .eslintrc
configuration file. You can omit the eslint-plugin-
prefix:
{
"plugins": ["tailwindcss"]
}
Configure the rules you want to use under the rules section.
{
"rules": {
"tailwindcss/classnames-order": 2,
"tailwindcss/no-custom-classname": 2,
"tailwindcss/no-contradicting-classname": 2
}
}
Learn more about Configuring Rules in ESLint.
Supported Rules
Learn more about each supported rules by reading their documentation:
classnames-order
: order classnames by target properties then by variants ([size:][theme:][state:]
)no-custom-classname
: only allow classnames from Tailwind CSSno-contradicting-classname
: e.g. avoidp-2 p-3
, different Tailwind CSS classnames (pt-2
&pt-3
) but targeting the same property several times for the same variant.
Upcoming Rules
no-redundant-variant
: e.g. avoidmx-5 sm:mx-5
, no need to redefinemx
insm:
variant as it uses the same value (5
)
Alternatives
I wrote this plugin after searching for existing tools which perform the same task but didn't satisfied my needs:
- eslint-plugin-tailwind, not bad but no support (yet) for variants sorting
- Headwind, only works within Visual Studio Code
Contributing
You are welcome to contribute to this project by reporting issues, feature requests or even opening Pull Requests.
Learn more about contributing to ESLint-plugin-TailwindCSS.