Package Exports

eslint-plugin-tailwindcss

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (eslint-plugin-tailwindcss) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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,
    }
}

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

Upcoming Rules

no-contradicting-classname: e.g. avoid p-2 p-3, different Tailwind CSS classnames (pt-2 & pt-3) but targeting the same property
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.