What is eslint-plugin-tailwindcss?
eslint-plugin-tailwindcss is an ESLint plugin that provides linting rules for Tailwind CSS classes. It helps ensure that Tailwind CSS classes are used correctly and consistently in your project.
What are eslint-plugin-tailwindcss's main functionalities?
Class Order
This feature ensures that Tailwind CSS classes are ordered correctly. It helps maintain a consistent order of classes, which can improve readability and maintainability.
module.exports = {
plugins: ['tailwindcss'],
rules: {
'tailwindcss/classnames-order': 'warn'
}
};
No Custom Classnames
This feature disallows the use of custom class names that are not part of the Tailwind CSS framework. It ensures that only Tailwind CSS classes are used, which can help prevent styling issues.
module.exports = {
plugins: ['tailwindcss'],
rules: {
'tailwindcss/no-custom-classname': 'error'
}
};
No Arbitrary Value
This feature disallows the use of arbitrary values in Tailwind CSS classes. It ensures that only predefined values are used, which can help maintain consistency and prevent errors.
module.exports = {
plugins: ['tailwindcss'],
rules: {
'tailwindcss/no-arbitrary-value': 'error'
}
};
Other packages similar to eslint-plugin-tailwindcss
eslint-plugin-css-modules
eslint-plugin-css-modules is an ESLint plugin that provides linting rules for CSS Modules. It helps ensure that CSS Modules are used correctly and consistently in your project. Unlike eslint-plugin-tailwindcss, which focuses on Tailwind CSS, eslint-plugin-css-modules is designed for projects using CSS Modules.
stylelint
stylelint is a powerful, modern linter that helps you avoid errors and enforce conventions in your styles. While eslint-plugin-tailwindcss is specifically for Tailwind CSS, stylelint can be used with any CSS framework or custom CSS. It offers a wide range of rules and is highly configurable.
eslint-plugin-styled-components-a11y
eslint-plugin-styled-components-a11y is an ESLint plugin that provides accessibility linting rules for styled-components. It helps ensure that styled-components are used in an accessible way. While eslint-plugin-tailwindcss focuses on Tailwind CSS, eslint-plugin-styled-components-a11y is designed for projects using styled-components.
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 ๐
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.
๐ค Support eslint-plugin-tailwindcss
| |
---|
Premium Sponsors Support us by becoming a sponsor. Become a recurring sponsor | |
Current Sponsors Any amount is appreciated. | |
Past sponsors Even if this is just a one-time thing Become a backer | |
Contributors This project can evolve thanks to all the people who contribute. You are welcome to contribute to this project by reporting issues, feature requests or even opening Pull Requests. | |
We need you โค๏ธ
If you enjoy my work you can:
Latest changelog
View all releases on github
Installation
1. Install eslint
You'll first need to install ESLint:
$ npm i -D eslint
Then, create you .eslintrc.js
file
module.exports = {
root: true,
};
2. Install eslint-plugin-tailwindcss
$ npm i -D tailwindcss eslint-plugin-tailwindcss
Edit your .eslintrc
file to use our recommended
preset to get reasonable defaults:
module.exports = {
root: true,
extends: ["plugin:tailwindcss/recommended"],
};
If you do not use our preset you will need to specify individual rules and add extra configuration...
Learn more about Configuring Rules in ESLint.
3. Add a npm script
In your package.json
add one or more script(s) to run eslint targeting your source files:
"scripts": {
"lint": "eslint ./src",
"lint:debug": "eslint ./src --debug",
"lint:fix": "eslint ./src --fix"
},
4. Run the linting task
npm run lint
can do the job on demand but you can also get live feedback using VS Code ESLint extension, just make sure you restart VS Code as it can be required for the plugin to work as expected.
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
.