eslint-plugin-tailwindcss v3.15.1
eslint-plugin-tailwindcss
Rules enforcing best practices and consistency using Tailwind CSS v2.1.2
🎉 Since v1.5.0, the plugin will parse the
tailwind.config.js
file and use the correct values based on your own settings.👍 Most of the new JIT mode features are also supported.
Latest changelog
- Add
groupByResponsive
option (default:false
) inv1.13.0
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 CSS and the values from thewhitelist
optionno-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.
Using ESLint extension for Visual Studio Code, you will get these messages
You can can the same information on your favorite command line software as well.
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
Add tailwindcss
to the plugins section of your .eslintrc
configuration file. You can omit the eslint-plugin-
prefix:
{
"plugins": ["tailwindcss"]
}
Configuration
Use our preset to get reasonable defaults:
"extends": [
"plugin:tailwindcss/recommended"
]
If you do not use a preset you will need to specify individual rules and add extra configuration:
Configure the rules you want to use under the rules section.
The following lines are matching the configuration saved in the
recommended
preset...
{
"rules": {
"tailwindcss/classnames-order": "warn",
"tailwindcss/no-custom-classname": "warn",
"tailwindcss/no-contradicting-classname": "error"
}
}
Learn more about Configuring Rules in ESLint.
Optional shared settings
Most rules shares the same settings, instead of duplicating some options...
You should also specify settings that will be shared across all the plugin rules. More about eslint shared settings.
All these settings have nice default values that are explained in each rules' documentation. I'm listing them in the code below just to show them.
{
"settings": {
"tailwindcss": {
// These are the default values but feel free to customize
"callees": ["classnames", "clsx", "ctl"],
"config": "tailwind.config.js",
"cssFiles": ["**/*.css", "!**/node_modules"],
"groupByResponsive": false,
"groups": defaultGroups, // imported from groups.js
"prependCustom": false,
"removeDuplicates": true,
"whitelist": []
}
}
}
The plugin will look for each setting value in this order and stop looking as soon as it finds the settings:
- In the rule option argument (rule level)
- In the shared settings (plugin level)
- Default value of the requested setting (plugin level)...
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.
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
7 months ago
10 months ago
11 months ago
11 months ago
12 months ago
11 months ago
11 months ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago