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

I worked on this repo using pnpm but it should work with other package manager.

pnpm i

pnpm build

pnpm test

or

pnpm test:jest

Tests were setup to work with jest and vitest both comes with pros and cons...

I would recommend Vitest but I also added Jest in case you want it.

NB: In order to use, the RuleTester from @typescript-eslint/rule-tester, we must:

• Have a tsconfig.json with:

  {
    "compilerOptions": {
      "module": "nodenext",
      "moduleResolution": "nodenext"
    }
  }
  

  More info can be found on v6: Cannot find module @typescript-eslint/* or its corresponding type declarations.

  You can use bundler, node16, or nodenext for moduleResolution.

• Use eslint with v8, typescript-eslint does not support v9 yet

pnpm docs:init will create new files for each rule if necessary.

pnpm docs:update will update existing files and the rules list.

You can see an example of generated documentation in the next section.

💡 Manually fixable by editor suggestions.

See eslint-plugin-example-typed-linting for an example plugin that supports typed linting.

Another example of eslint-plugin using typescript-eslint is eslint-plugin-vitest...

🥰 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