eslint-plugin-tailwindcss
Rules enforcing best practices and consistency using Tailwind CSS.
While you can use the official plugin prettier-plugin-tailwindcss
for ordering your classnames...
eslint-plugin-tailwindcss
offers more than 5 other rules, that you can benefit from on top of prettier-plugin-tailwindcss
. Sounds good ? Keep reading π
π Compatible with Tailwind CSS v3 and v2 π
Make sure to use the correct version
- Still using Tailwind CSS v2 ? π»
- You should stick with
v2.x.x
of this plugin (npm i eslint-plugin-tailwindcss@tw2
)
- Using Tailwind CSS v3 ? π
- Make sure to use
v3.x.x
of this plugin (npm i eslint-plugin-tailwindcss
If you are using the eslint extension, make sure to restart VSCode in order to use the lastest version of the plugin and not the former version from the cache.
We need you β€οΈ
Version 3 of the plugin is brand new and you will most likely experience bugs, please provide feedback by opening issues on GitHub with all the useful informations so that we can fix them all.
If you enjoy my work you can:
Latest changelog
View all releases on github
TheoBr sponsorship gave me a little extra motivation. Thanks, man
Supported Rules
Learn more about each supported rules by reading their documentation:
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 -D eslint
Next, install the latest version of eslint-plugin-tailwindcss
if you are using Tailwind CSS v3
$ npm i -D eslint-plugin-tailwindcss
Still using Tailwind CSS v2?
π Install the latest version compatible with Tailwind CSS v2 via npm i -D eslint-plugin-tailwindcss@tw2
Please note that new rules might not be available in the tw2
distribution
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/enforces-negative-arbitrary-values": "warn",
"tailwindcss/enforces-shorthand": "warn",
"tailwindcss/migration-from-tailwind-2": "warn",
"tailwindcss/no-arbitrary-value": "off",
"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",
"!**/.*",
"!**/dist",
"!**/build",
],
cssFilesRefreshRate: 5_000,
removeDuplicates: true,
skipClassAttribute: false,
whitelist: [],
tags: [],
classRegex: "^class(Name)?$", // can be modified to support custom attributes. E.g. "^tw$" for `twin.macro`
},
},
}
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
-
validate-modifiers
: I don't know if possible, but I'd like to make sure all the modifiers prefixes of a classname are valid e.g. yolo:bg-red
should throw an error...
-
no-redundant-variant
: e.g. avoid mx-5 sm:mx-5
, no need to redefine mx
in sm:
variant as it uses the same value (5
)
-
only-valid-arbitrary-values
:
- e.g. avoid
top-[42]
, only 0
value can be unitless. - e.g. avoid
text-[rgba(10%,20%,30,50%)]
, can't mix %
and 0-255
.
Alternatives
I wrote this plugin after searching for existing tools which perform the same task but didn't satisfied my needs:
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-Tailwind CSS.