eslint-plugin-tailwindcss

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.

README

eslint-plugin-tailwindcss

Rules enforcing best practices and consitency using Tailwind CSS v2.0.3

Installation

You'll first need to install ESLint:

$ npm i eslint --save-dev

Next, install eslint-plugin-tailwindcss:

$ npm install eslint-plugin-tailwindcss --save-dev

Usage

Add tailwindcss to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
    "plugins": [
        "tailwindcss"
    ]
}

Then configure the rules you want to use under the rules section.

{
    "rules": {
        "tailwindcss/classnames-order": 2,
        "tailwindcss/no-custom-classname": 2,
        "tailwindcss/no-contradicting-classname": 2,
    }
}

Learn more about Configuring Rules.

Supported Rules

• classnames-order: order classnames by target properties then by variants ([size:][theme:][state:])
• no-custom-classname: only allow classnames from Tailwind CSS
• no-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.

Upcoming Rules

• 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)

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.