Registry / testing / eslint-plugin-tailwind

eslint-plugin-tailwind

library0.2.1jsnpmunverified

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.

testing

npm install eslint-plugin-tailwind

github ↗package ↗

INSTALL

IMPORT

SIG · ESLINT-PLUGIN-TAIL

eslint-plugin-tailwind

testingjavascriptv0.2.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

tailwind/class-order

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

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

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

plugin:tailwind/recommended

✓ extends: ['plugin:tailwind/recommended']

✗ extends: ['eslint-plugin-tailwind']

Must use the 'plugin:' prefix and include '/recommended' to activate the rule.

eslint-plugin-tailwind (as ESLint plugin)

✓ "plugins": ["tailwind"] in .eslintrc

✗ "plugins": ["eslint-plugin-tailwind"]

Plugin name should be 'tailwind' (without 'eslint-plugin-') when using the 'plugins' array.

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> ); }

Debug

Known issues

gotchaPlugin 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.

affects: all

gotchaOnly 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.

affects: all

deprecatedPackage has not been updated since initial release in 2020.

fix

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

affects: all

Errors

Common errors & fixes

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

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.

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

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

fix

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

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

Importing rule directly from package incorrectly.

fix

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

Upgrade

Version history

0.2.1latest on npm

Audit

Dependencies

eslintrequiredpeer dependency

Agent activity

7 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/Idered/eslint-plugin-tailwind ↗

packagehttps://www.npmjs.com/package/eslint-plugin-tailwind ↗