eslint-plugin-tailwind icon indicating copy to clipboard operation
eslint-plugin-tailwind copied to clipboard

ESLint rules for Tailwind CSS

eslint-plugin-tailwind

npm (scoped) npm bundle size (scoped)

ESLint rules for Tailwind CSS

Installation

You'll first need to install ESLint:

$ npm i eslint --save-dev

Next, install eslint-plugin-tailwind:

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

Note: If you installed ESLint globally (using the -g flag) then you must also install eslint-plugin-tailwind globally.

Usage

Extend your ESLint config with tailwind config:

{
  "extends": ["plugin:tailwind/recommended"]
}

Supported Rules

  • tailwind/class-order

Supported languages and file extensions

  • HTML - html
  • React - js, jsx, tsx

VS Code integration

See /example/.vscode directory for recommended project settings.

Roadmap

  • [ ] Handle responsive prefixes - sm, md etc.
  • [ ] Handle pseudo classes - hover, active etc.
  • [ ] Add support for Vue
  • [ ] Add support for Svelte
  • [ ] Add support for Angular