eslint-plugin-tailwindcss

Rules

💼 Configurations enabled in.
⚠️ Configurations set to warn in.
✅ Set in the recommended configuration.
🔧 Automatically fixable by the --fix CLI option.
💡 Manually fixable by editor suggestions.

Settings

You should specify settings that will be shared across all the plugin rules. (More about eslint shared settings)

// eslint.config.mjs
{
  settings: {
    tailwindcss: {
      // Attributes/props that could contain Tailwind CSS classes...
      // Optional, default values: ["class", "className", "ngClass", "@apply"]
      attributes: ["class"],
      // The absolute path pointing to you main Tailwind CSS v4 config file.
      // It must be a `.css` file (v4), not a `.js` file (v3)
      // REQUIRED, default value will not help
      cssConfigPath: dirname(fileURLToPath(import.meta.url)) + "/styles/tailwind.css",
      // Functions/tagFunctions that will be parsed by the plugin.
      // Optional, default values: ["classnames", "clsx", "ctl", "cva", "tv", "tw"]
      functions: ["twClasses"],
      // Keys to be ignored in object expressions
      // Optional, default values: ["defaultVariants", "compoundVariants"]
      ignoredKeys: ["defaultVariants", "compoundVariants", "foo"],
      // Max size of the Set or Map objects used for caching
      // Optional, default value: 250000
      cacheMaxSize: 150_000,
      // Max lifetime of the cache set in ms
      // Optional, default value: 10 * 60 * 1000 (10 minutes)
      cacheMaxAge: 60 * 1000,
    },
  }
}

The default settings are exported via the DEFAULT_SETTINGS.

Made for Tailwind CSS v4

Version 4 of the eslint-plugin-tailwindcss is:

• re-written from scratch
• using TypeScript
• Based as much as possible on internal assets of Tailwind CSS:
  • via the prettier-plugin-tailwindcss plugin
  • via tailwind-api-utils
• only compatible with:
  • Tailwind CSS v4.x.x
  • ESLint flat config format

Status

This branch was started back in 2024, and I was quickly stuck while trying to use the internal mechanics of the tailwindcss package.

Simple tasks, like loading the CSS config, was impossible inside an ESLint plugin because ESLint plugins are synchronous by design while the tailwindcss package uses plenty of async functions.

😇 Hopefully, hyoban made tailwind-api-utils and demonstrated in a PR how I could use it via synckit 👏.

Work in progress

This version is far from finished, yet it is available and open for contributions.

All the details are available in the changelog.

Latest completed steps

• restore the automated tests running on the merge requests of the repo
• implement and test the usage of tailwind-api-utils
• read the settings from eslint (shared settings & rules settings)
• create the config utility
• implement the classnames-order rule and its tests
• implement the no-custom-classname rule and its tests

Next steps

• implement the enforces-negative-arbitrary-values rule and its tests
• implement the enforces-shorthand rule and its tests
• implement the no-arbitrary-value rule and its tests
• implement the no-contradicting-classname rule and its tests
• implement the no-unnecessary-arbitrary-value rule and its tests

Contributing

The project is open to all developers, you can contribute the eslint-plugin-tailwindcss.

🤝 Support eslint-plugin-tailwindcss

🥰 How you can support us?	💪 They did it!
Premium Sponsors Support us by becoming a sponsor. Become a recurring sponsor
Current Sponsors Any amount is appreciated.
Past sponsors Even if this is just a one-time thing. Become a backer
Contributors This project can evolve thanks to all the people who contribute. You are welcome to contribute to this project by reporting issues, feature requests or even opening Pull Requests.
Supporters Talk about the plugin on your social networks	Share the word on Bluesky or Reach my profile