eslint-plugin-tailwindcss
Advanced tools
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.
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'
}
};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.
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 👇
v2.x.x of this plugin (npm i eslint-plugin-tailwindcss@tw2)v3.x.x of this plugin (npm i eslint-plugin-tailwindcssIf 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.
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:
enforces-shorthand and classnames-order with officialSorting: true by introducing WeakMap caches to reduce duplicate calculations (by mpsijm 🙏)officialSorting for classnames-order can be set to true in order to use the same ordering order as the official prettier-plugin-tailwindcssenforces-shorthand rule fixer and fix prefixenforces-shorthand rule loses the importance flagenforces-negative-arbitrary-values: prefers top-[-5px] instead of -top-[5px]ring-opacity-* in migration-from-tailwind-2 rulemigration-from-tailwind-2 and enforces-shorthand fixer with @angular-eslint/template-parserno-custom-classname rule prevents migration-from-tailwind-2 ruleprefix@angular-eslint/template-parserArrayExpression elements and ObjectExpression, see issue #99 (by matt-tingen 🙏)
TheoBr sponsorship gave me a little extra motivation. Thanks, man
Learn more about each supported rules by reading their documentation:
classnames-order: order classnames by target properties then by variants ([size:][theme:][state:])enforces-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.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.
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@tw2Please note that new rules might not be available in the
tw2distribution
Add tailwindcss to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:
{
"plugins": ["tailwindcss"]
}
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
recommendedpreset...
{
"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.
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,
"groupByResponsive": true,
"groups": defaultGroups, // imported from groups.js
"officialSorting": false,
"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:
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.I wrote this plugin after searching for existing tools which perform the same task but didn't satisfied my needs:
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.
FAQs
Rules enforcing best practices while using Tailwind CSS
The npm package eslint-plugin-tailwindcss receives a total of 665,180 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.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.