eslint-plugin-tailwind-suggestions

An ESLint plugin that automatically detects and replaces non-canonical Tailwind CSS classes in your templates and JSX files.

Powered by Tailwind's internal design system engine, this plugin seamlessly converts arbitrary values (like w-[100px]) into their canonical theme equivalents (like w-25).

Installation

npm install -D eslint-plugin-tailwind-suggestions tailwindcss

Usage (Flat Config - ESLint v9+)

Add the plugin to your eslint.config.js file:

import tailwindSuggestions from "eslint-plugin-tailwind-suggestions";

export default [
  {
    files: ["**/*.{js,jsx,ts,tsx,html,vue}"],
    plugins: {
      "tailwind-suggestions": tailwindSuggestions,
    },
    rules: {
      "tailwind-suggestions/enforce-canonical": "error",
    },
  },
];

Usage (Legacy - .eslintrc)

Add the plugin to your .eslintrc configuration:

{
  "plugins": ["tailwind-suggestions"],
  "rules": {
    "tailwind-suggestions/enforce-canonical": "error"
  }
}

Auto-fixing

This rule is fully auto-fixable. Running eslint --fix or utilizing "Format on Save" in your IDE will instantly update your classes.

Author

Created by Anbuselvan Annamalai.

License

MIT License © Anbuselvan Annamalai