{"id":19957,"library":"eslint-plugin-tailwind","title":"eslint-plugin-tailwind","description":"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.","status":"maintenance","version":"0.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/Idered/eslint-plugin-tailwind","tags":["javascript","eslint","eslintplugin","eslint-plugin","tailwind","tailwindcss"],"install":[{"cmd":"npm install eslint-plugin-tailwind","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-tailwind","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-tailwind","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency","package":"eslint","optional":false}],"imports":[{"note":"Rules are not exported directly; use plugin:tailwind/recommended in ESLint config.","wrong":"const { classOrder } = require('eslint-plugin-tailwind');","symbol":"tailwind/class-order","correct":"import { rules } from 'eslint-plugin-tailwind'; // within custom plugin"},{"note":"Must use the 'plugin:' prefix and include '/recommended' to activate the rule.","wrong":"extends: ['eslint-plugin-tailwind']","symbol":"plugin:tailwind/recommended","correct":"extends: ['plugin:tailwind/recommended']"},{"note":"Plugin name should be 'tailwind' (without 'eslint-plugin-') when using the 'plugins' array.","wrong":"\"plugins\": [\"eslint-plugin-tailwind\"]","symbol":"eslint-plugin-tailwind (as ESLint plugin)","correct":"\"plugins\": [\"tailwind\"] in .eslintrc"}],"quickstart":{"code":"// .eslintrc.json\n{\n  \"extends\": [\"plugin:tailwind/recommended\"],\n  \"rules\": {\n    \"tailwind/class-order\": \"error\"\n  }\n}\n\n// Example React component\nfunction MyComponent() {\n  return (\n    <div className=\"flex items-center bg-white p-4 shadow\">\n      <h1 className=\"text-xl font-bold\">Hello World</h1>\n    </div>\n  );\n}","lang":"json","description":"Sets up ESLint to enforce Tailwind class ordering using the plugin's recommended config."},"warnings":[{"fix":"Consider using other tools like headwind or prettier-plugin-tailwindcss for full class sorting support.","message":"Plugin does not handle responsive prefixes (sm:, md:) or pseudo-classes (hover:, focus:).","severity":"gotcha","affected_versions":"all"},{"fix":"Check the roadmap; for now, use different plugin or manual sorting for unsupported frameworks.","message":"Only supports React and HTML; no Vue, Svelte, or Angular support.","severity":"gotcha","affected_versions":"all"},{"fix":"Consider using more actively maintained alternatives like eslint-plugin-tailwindcss or prettier-plugin-tailwindcss.","message":"Package has not been updated since initial release in 2020.","severity":"deprecated","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npm install eslint-plugin-tailwind --save-dev` and add `\"plugins\": [\"tailwind\"]` to .eslintrc.","cause":"Plugin not installed or not listed in plugins array correctly.","error":"ESLint couldn't find the plugin \"eslint-plugin-tailwind\"."},{"fix":"Use `extends: ['plugin:tailwind/recommended']` to activate the rule.","cause":"Rule is not defined because the plugin config is not properly loaded.","error":"Configuration for rule \"tailwind/class-order\" is invalid."},{"fix":"Do not import the plugin directly; use it via ESLint config 'extends' or 'plugins'.","cause":"Importing rule directly from package incorrectly.","error":"TypeError: Cannot read property 'class-order' of undefined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}