eslint-plugin-tailwind-ban

🚫 Disallow specific Tailwind CSS utility classes.
✨ Supports ESLint Flat Config.

📦 Overview

This plugin lets you ban specific Tailwind CSS design tokens by class name.
It is especially useful for enforcing design guidelines or phasing out deprecated tokens.

• ✅ Flat Config supported
• 🎯 Focused on JSX className string literals only
• ⚠️ Does not parse classnames(), template literals, or dynamic expressions
• ❌ Does not check if classes are valid Tailwind tokens (see eslint-plugin-tailwindcss for that)

💡 Example

<div className="text-red-500" /> // ❌ banned
<div className="text-green-500" /> // ✅ allowed

With config:

rules: {
  'tailwind-ban/no-deny-tailwind-tokens': ['error', {
    denyList: ['text-red-500']
  }]
}

🔧 Installation

pnpm add -D eslint-plugin-tailwind-ban

🚀 Usage (Flat Config)

// eslint.config.js
import plugin from "eslint-plugin-tailwind-ban";

export default [
  {
    files: ["**/*.tsx"],
    plugins: {
      "tailwind-ban": plugin,
    },
    rules: {
      "tailwind-ban/no-deny-tailwind-tokens": [
        "error",
        {
          denyList: ["text-red-500"],
        },
      ],
    },
  },
];

📝 License

MIT