[Feature request] Support Tailwind 4

[aslakhellesoy]

Is your feature request related to a problem? Please describe.

TailwindCSS 4 is in alpha and will be released soon. Currently I cannot use this module with Tailwind 4 because package.json specifies ^3.4.0.

Describe the solution you'd like

A new release that supports both ^3 and ^4.

Describe alternatives you've considered

I tried updating tailwindcss to 4.0.0-alpha.9 in peerDependencies and devDependencies, but npm install failed because of other dependencies:

• @tailwindcss/aspect-ratio
• @tailwindcss/forms
• @tailwindcss/line-clamp
• @tailwindcss/typography

These all depend on tailwindcss version ^3.

I'm not sure when/if those plugins will be updated for Tailwind 4.

Additional context

Will this need some help from the maintainers of the 4 modules above?

[francoismassart]

Making the eslint-plugin-tailwindcss compatible with Tailwind CSS v4 won't be easy and it'll definitively take a lot of time. One of the main challenge will be to workaround the possible the absence of tailwind.config.js file.

Parsing of existing CSS file (containing the CSS vars) is also very slow compared to native config...

I'll work on it but keep in mind this project is free and I can only work on it on my free time 😉

[virtuallyunknown]

@francoismassart in their announcement post about v4, they mention that configuration would still be available with a tailwind.config.js file, and it's something on their roadmap.

Support for JavaScript configuration files — reintroducing compatibility with the classic tailwind.config.js file to make migrating to v4 easy.

https://tailwindcss.com/blog/tailwindcss-v4-alpha#roadmap-to-v4-0

So in case parsing CSS proves to be too difficult, inefficient or time-consuming, would you be open to the idea of having such file mandatory in order to use eslint-plugin-tailwindcss?

To be totally honest here, I am not completely sold on the idea of defining all colors and other variables in a CSS file to begin with, so who knows, I can see people that will prefer to stick with the good old config file, especially if config-less Tailwind breaks other tools such as this one.

The only worrying part here is that they mention they are doing this to make v4 migrations easy, which may or may not imply they plan to get rid of it altogether in some later version, but I could be wrong.

[francoismassart]

I started reading the next branch of Tailwind CSS's codebase and I'll work on it soon on my free time, I've a full time job to comply to 😉

[francoismassart]

Quick update on v4 of eslint-plugin-tailwindcss:

• It'll use the following stack:
  • Turborepo with:
    • eslint-plugin-tailwindcss as a package
    • several playgrounds as apps (React.js, Vue, etc.) for easier live testing
  • TypeScript
  • Vitest
  • @typescript-eslint
  • eslint-doc-generator
• It'll only support Tailwind CSS v4, we'll drop support for v3
• All rules will be rewritten and the strategy is to be based as much as possible on Tailwind CSS exposed methods:
  • better performances
  • stable results
  • custom logic will be added only when required
• I don't have a lot of time to work on it as it is a side project, you can contribute:
  • Become a sponsor on GitHub or via thanks.dev
  • Make pull requests or provide exhaustive issues or feedbacks
  • Share the project on social medias
  • Lastly, the project is used by almost 40K projects, yet it has only 1.3K stars. I hope reaching at least 4K stars might offer me the free usage of Copilot which I do not have.

[Frikadellios]

Hello 👋,

Find some trouble with tailwind CLI, when use last alpha version with NPM.

audit fix --force

Installed latest tailwind 3 CLI.

Use it with astro js framework and node(18-20), maybe this is a reason, I don't know.

And I don't see this bug, If I am using Bun with bunx --bun command...

But in both ways, See problem with output.css file in vertical alight ... I don't now why, can it be biome if I migrated from prettier with tailwind css plugin...

Why?