eslint-plugin-tailwind

0.2.1 verified Sat Apr 25 auth: no javascript maintenance

An ESLint plugin providing the `tailwind/class-order` rule to enforce consistent ordering of Tailwind CSS utility classes. Version 0.2.1 works with ESLint 3–7 on Node >=4, only supports React (JS/JSX/TSX) and HTML files. Does not handle responsive prefixes, pseudo-classes, or frameworks like Vue, Svelte, or Angular. Implements a single rule; no active updates since initial release.

Common errors

error ESLint couldn't find the plugin "eslint-plugin-tailwind". ↓

cause Plugin not installed or not listed in plugins array correctly.

fix

Run npm install eslint-plugin-tailwind --save-dev and add "plugins": ["tailwind"] to .eslintrc.

error Configuration for rule "tailwind/class-order" is invalid. ↓

cause Rule is not defined because the plugin config is not properly loaded.

fix

Use extends: ['plugin:tailwind/recommended'] to activate the rule.

error TypeError: Cannot read property 'class-order' of undefined ↓

cause Importing rule directly from package incorrectly.

fix

Do not import the plugin directly; use it via ESLint config 'extends' or 'plugins'.

Warnings

gotcha Plugin does not handle responsive prefixes (sm:, md:) or pseudo-classes (hover:, focus:). ↓

fix Consider using other tools like headwind or prettier-plugin-tailwindcss for full class sorting support.

gotcha Only supports React and HTML; no Vue, Svelte, or Angular support. ↓

fix Check the roadmap; for now, use different plugin or manual sorting for unsupported frameworks.

deprecated Package has not been updated since initial release in 2020. ↓

fix Consider using more actively maintained alternatives like eslint-plugin-tailwindcss or prettier-plugin-tailwindcss.

Install

npm install eslint-plugin-tailwind

yarn add eslint-plugin-tailwind

pnpm add eslint-plugin-tailwind

Imports

tailwind/class-order

wrong

const { classOrder } = require('eslint-plugin-tailwind');

correct

import { rules } from 'eslint-plugin-tailwind'; // within custom plugin

Rules are not exported directly; use plugin:tailwind/recommended in ESLint config.

plugin:tailwind/recommended
wrong
```
extends: ['eslint-plugin-tailwind']
```
correct
```
extends: ['plugin:tailwind/recommended']
```
Must use the 'plugin:' prefix and include '/recommended' to activate the rule.
eslint-plugin-tailwind (as ESLint plugin)
wrong
```
"plugins": ["eslint-plugin-tailwind"]
```
correct
```
"plugins": ["tailwind"] in .eslintrc
```
Plugin name should be 'tailwind' (without 'eslint-plugin-') when using the 'plugins' array.

Quickstart

Sets up ESLint to enforce Tailwind class ordering using the plugin's recommended config.

// .eslintrc.json
{
  "extends": ["plugin:tailwind/recommended"],
  "rules": {
    "tailwind/class-order": "error"
  }
}

// Example React component
function MyComponent() {
  return (
    <div className="flex items-center bg-white p-4 shadow">
      <h1 className="text-xl font-bold">Hello World</h1>
    </div>
  );
}