eslint-plugin-tailwindcss
Advanced tools
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 👇
While the development of eslint-plugin-tailwindcss for Tailwind CSS v4 is ongoing, you can use the latest version published on the beta channel to get partial support of Tailwind CSS v4.
npm i eslint-plugin-tailwindcss@beta -D
NB: As we will focus the effort on the full rewrite of the plugin, this version is available "as is" and you may get errors or false positives like for the rule
no-contradicting-classname. You can learn more about these issues on GitHub.
You can always disable specific rules if necessary.
This version has been made possible thanks to the work of hyoban and his project tailwind-api-utils.
Learn more about each supported rules by reading their documentation:
classnames-order: order classnames for consistency and it makes merge conflict a bit easier to resolveenforces-negative-arbitrary-values: make sure to use negative arbitrary values classname without the negative classname e.g. -top-[5px] should become top-[-5px]enforces-shorthand: merge multiple classnames into shorthand if possible e.g. mx-5 my-5 should become m-5migration-from-tailwind-2 for easy upgrade from Tailwind CSS v2 to v3.
Warning: at the moment you should temporary turn off the no-custom-classname rule if you want to see the warning from migration-from-tailwind-2no-arbitrary-value: forbid using arbitrary values in classnames (turned off by default)no-custom-classname: only allow classnames from Tailwind CSS and the values from the whitelist optionno-contradicting-classname: e.g. avoid p-2 p-3, different Tailwind CSS classnames (pt-2 & pt-3) but targeting the same property several times for the same variant.no-unnecessary-arbitrary-value: e.g. replacing m-[1.25rem] by its configuration based classname m-5Using 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.
eslint-plugin-tailwindcss| 🥰 How you can support us? | 💪 They did it! |
|---|---|
| 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. | |
| Supporters Talk about the plugin on your social networks | Share the word on Bluesky or Reach my profile |
enforces-shorthand rule now support place-content-*/place-items-*/place-self-*enforces-shorthand does not work for h- & w- when prefixed (by Kamahl19 🙏)no-arbitrary-value rule is too broadtag.div and tag(Component) (by nihalgonsalves 🙏)no-unnecessary-arbitrary-value 🎉shadow-md + shadow-[#color]can be used together 🤝tabular-nums and slashed-zero can be used together 🤝size-* based size, spacing, width and height 🤓size-screen 😅enforces-shorthand(by kachkaev 🙏)3.3.2 | ESLint plugin Tailwind CSS youtube.com/@eslint-plugin-tailwindcss |
|---|
eslint and eslint-plugin-tailwindcssYou'll first need to install ESLint:
$ npm i -D eslint eslint-plugin-tailwindcss
.eslintrcUse .eslintrc.* file to configure rules in ESLint < v9. See also: https://eslint.org/docs/latest/use/configure/.
module.exports = {
root: true,
extends: ["plugin:tailwindcss/recommended"],
};
If you would like to know about configuration, Learn more in ESLint docs
eslint.config.jsUse eslint.config.js file to configure rules. This is the default in ESLint v9, but can be used starting from ESLint v8.57.0. See also: https://eslint.org/docs/latest/use/configure/configuration-files-new.
import tailwind from "eslint-plugin-tailwindcss";
export default [...tailwind.configs["flat/recommended"]];
If you would like to know about configuration, Learn more in ESLint docs
Depending on the languages you are using in your project you must tell which parser will analyze your source files.
Our recommendations:
.eslintrcjs[x], react, ts[x]:
npm i -D @typescript-eslint/parsereslintrc:
overrides: [
{
files: ['*.ts', '*.tsx', '*.js'],
parser: '@typescript-eslint/parser',
},
],
vue.js:
npm i -D vue-eslint-parsereslintrc:
overrides: [
{
files: ['*.vue'],
parser: 'vue-eslint-parser',
},
],
HTML and similar:
npm i -D @angular-eslint/template-parsereslintrc:
overrides: [
{
files: ['*.html', '*.blade.php'],
parser: '@angular-eslint/template-parser',
},
],
We removed the default parsers which were added to
v3.8.2because it created negative impact on dependencies resolution, bundle size increase and possible conflicts with existing configurations.
eslint.config.jsFor js[x], ts[x]:
Install the parser: npm i -D @eslint/js typescript-eslint
Assign it to your files in eslint.config.js:
import js from "@eslint/js";
import ts from "typescript-eslint";
import tailwind from "eslint-plugin-tailwindcss";
export default [
// add eslint built-in
js.configs.recommended,
// add `typescript-eslint` flat config simply
// if you would like use more another configuration,
// see the section: https://typescript-eslint.io/getting-started#details
...ts.configs.recommended,
...tailwind.configs["flat/recommended"],
];
For vue.js:
Install the parser: npm i -D eslint-plugin-vue
Assign it to your files in eslint.config.js:
import vue from "eslint-plugin-vue";
import tailwind from "eslint-plugin-tailwindcss";
export default [
// add `eslint-plugin-vue` flat config simply
// if you would like use more another configuration,
// see the section: https://eslint.vuejs.org/user-guide/#bundle-configurations-eslint-config-js
...vue.configs["flat/recommended"],
...tailwind.configs["flat/recommended"],
];
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"
},
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.
The rules accept settings meant to fit your own choices, make sure to read the documentation of each rule.
Most rules share the same settings, instead of duplicating the options all over the place...
You should define the shared settings that will be shared across all the plugin rules.
All these settings already have nice default values that are explained in the documentation.
.eslintrcFYI, here are the default values:
{
settings: {
tailwindcss: {
// These are the default values but feel free to customize
callees: ["classnames", "clsx", "ctl"],
config: "tailwind.config.js", // returned from `loadConfig()` utility if not provided
cssFiles: [
"**/*.css",
"!**/node_modules",
"!**/.*",
"!**/dist",
"!**/build",
],
cssFilesRefreshRate: 5_000,
removeDuplicates: true,
skipClassAttribute: false,
whitelist: [],
tags: [], // can be set to e.g. ['tw'] for use in tw`bg-blue`
classRegex: "^class(Name)?$", // can be modified to support custom attributes. E.g. "^tw$" for `twin.macro`
},
},
}
eslint.config.jsimport tailwind from "eslint-plugin-tailwindcss";
export default [
...tailwind.configs["flat/recommended"],
{
settings: {
tailwindcss: {
// These are the default values but feel free to customize
callees: ["classnames", "clsx", "ctl"],
config: "tailwind.config.js", // returned from `loadConfig()` utility if not provided
cssFiles: [
"**/*.css",
"!**/node_modules",
"!**/.*",
"!**/dist",
"!**/build",
],
cssFilesRefreshRate: 5_000,
removeDuplicates: true,
skipClassAttribute: false,
whitelist: [],
tags: [], // can be set to e.g. ['tw'] for use in tw`bg-blue`
classRegex: "^class(Name)?$", // can be modified to support custom attributes. E.g. "^tw$" for `twin.macro`
},
},
},
];
The plugin will look for each setting in this order and stops searching as soon as it finds the settings:
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:
top-[42], only 0 value can be unitless.text-[rgba(10%,20%,30,50%)], can't mix % and 0-255.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 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 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.
FAQs
Rules enforcing best practices while using Tailwind CSS
The npm package eslint-plugin-tailwindcss receives a total of 1,041,690 weekly downloads. As such, eslint-plugin-tailwindcss popularity was classified as popular.
We found that eslint-plugin-tailwindcss demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Socket researchers discovered nine malicious NuGet packages that use time-delayed payloads to crash applications and corrupt industrial control systems.
Security News
Socket CTO Ahmad Nassri discusses why supply chain attacks now target developer machines and what AI means for the future of enterprise security.
Security News
Learn the essential steps every developer should take to stay secure on npm and reduce exposure to supply chain attacks.