WIP: Tailwind v3 -> v4

[techknowlogick]

No description provided.

[techknowlogick]

@silverwind this is definitely not the best choice Ive made here, but perhaps you have a suggestion with what to do for all the layer(utilities)

[silverwind]

Keep it layerless like it was in v3. All you need should be this, no layer declarations anywhere:

@import "tailwindcss/theme";
@import "tailwindcss/utilities";
@config "../../tailwind.config.ts";

Also, layers likely will not work on browsers like Palemoon anyways.

[silverwind]

1. Remove the prefix, we are in full control of the CSS and tw: is weird and unneeded. The previous prefix was only because of concerns regarding naming conflicts, but we no longer have them.
2. Keep the TS config file, it's far more flexible to generate classes with actual code then writing out hundrets of classes by hand. TS config is still fully supported in tailwind 4, you just need to import it from TS.
3. Follow https://tailwindcss.com/docs/upgrade-guide exactly, there are a ton of breaking changes in tailwind 4.
4. I think you can drop the postcss dependency and transformer with this.

[wxiaoguang]

1. Remove the prefix, we are in full control of the CSS

Still no at the moment.

I have told you many many times: global pollution and conflicts will definitely cause various bugs and regressions.

A real example: this isn't the first and won't be the last.

[wxiaoguang]

And this one, the hidden example I have said many many many times.

• [Proposal] Refactor frontend hide/hidden mechanism #22847 (comment)

[silverwind]

Ok, keep prefix. Possible way to remove prefix later (not in this PR):

• Find all class name collissions like grid etc
• Replace CSS for those class names with equivalent tailwind classes

The only danger here is tailwind classes are !important so the resulting specificity will in most cases be higher, but it's very unlikely that that would cause issues.