🔧 Automatically fixable by the --fix CLI option.
💡 Manually fixable by editor suggestions.

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"]
    },
  }
}

The default settings are exported via the DEFAULT_SETTINGS.

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

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

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

• 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

The project is open to all developers, you can contribute the 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