[IntelliSense] Lint warnings about V3 classes when using V4

[wottpal]

Hey there, after seeing viral tweets like this about the LLM<->TailwindCSS 4 situation, I thought about how either a linter (e.g. Biome) or this plugin could solve it.

When this plugin detects a V4 workspace but V3 classes are used somewhere, it could simply show a descriptive linting warning or error (like "Using shadow is TailwindCSS V3 syntax. This project is using TailwindCSS V4. Use shadow-sm instead. Read more at https://…") which gets read & fixed easily by Cursors agentic mode.

Wdyt? Sorry if this is already implemented, I didn't upgrade any of my projects yet (because of reasons like the tweet mentioned).

[asgeo1]

Similar issue; I've just updated a Tailwind v3 project to v4, and I'm thinking of rolling it back. Just seems too hard to ensure a project is using v4 syntax, and not reverting to v3 syntax due to use of LLM or just plain making mistakes.

There needs to be some sort of linter to highlight when v3 or earlier syntax is being used with v4 project.

eslint-plugin-tailwind has an open issue to update to v4 still, but may take some time.

Surely there's some other work around. I note the npx @tailwindcss/upgrade command did a good job of upgrading from v3 to v4 syntax. I'd be happy to just run that manually once in a while to see if anything is incorrectly using v3 syntax. Except it only let's you run it once.

npx @tailwindcss/upgrade --force
≈ tailwindcss v4.0.12

│ Tailwind CSS v4.0.12 found. The migration tool can only be run on v3 projects.