[2.0] Flowbite and tailwind to the latest versions

[tesar-tech]

Description

Closes #5951

Upgrade to the newest versions of Flowbite and Tailwind.

The Flowbite update now uses v4 of Tailwind. The update was primarily about changing the versions of the JavaScript and CSS files. Everything should be working fine, and I haven’t noticed any issues so far.

Tailwind now has a cleaner way of being included. We no longer distinguish between testing and production—there is now a single blazorise.tailwind.min.css file that should be used in both cases. However, for testing purposes, it is still possible to use the Tailwind CDN.

Files used exclusively for the build process are now placed in a separate folder to distinguish them from user-facing CSS (in wwwroot).

Users can still customize Blazorise's Tailwind-related styles to keep their CSS as small as possible. This should also be mentioned in the integration guide.

Safe classes are now stored in a .txt file, as Tailwind v4 scans everything by default. There are many invalid Tailwind classes that need correction, such as:

• !lg:b-5 and similar isn't even valid.
• b-accordion and other b- prefixed classes will be included via the import of blazorise.tailwind.css.

I think the safelist and resulting CSS is unnecessary large. We need the safelist just for the "computed" classes, like:

public override string TextEditColor( Color color ) => color?.Name?.Length > 0 ? $"text-{ToColor( color )}" : null;

the rest is taken from scanning through the TailwindClassProvider.cs. I am not sure how the safe list generation was approached before.

The Tailwind demo now uses the production solution (no cdn)

There is a possibility to merge blazorise.tailwind.min.css with Flowbite’s CSS to save some kilobytes. Currently:

• Flowbite: 192 KB
• Blazorise: 132 KB
• Merging could potentially reduce the total size to around 250 KB, but this needs further consideration.

To-Dos:

• Update integration guides for Tailwind.
• Check for outdated classes in the class provider.
• Possibly update the blog post about Tailwind.
• Purge the safelist.
• Decide whether to merge CSS with Flowbite.
• Document the build process (it's simple but should be mentioned somewhere).

[stsrki]

Don't forget to document any migration notes. This should be done in 2025-01-15_MigrationTo2 blog post.

[stsrki]

All files in tailwind-build must be in wwwroot. Otherwise, they will not end in the NuGet package and will not be able to be consumed by the users. I have just tested this by publishing NuGet.

[tesar-tech]

exactly, that's on purpose. users need just the one in wwwroot

[stsrki]

And how would they customize tailwind based on our settings?

[tesar-tech]

Same as before. They basically need to replicate our tw build process - with our safelist and input css files + with theirs own rules.
Having the safelist and base css inside nuget package doesn't really help, as these files are usually available through the _content only during runtime.

[stsrki]

God, this is a nightmare to work with. I cannot make TW CLI to work at all. Been trying it all morning.

[tesar-tech]

What's wrong? There is a simple Readme file in tailwind build folder

[stsrki]

Something about broswer caniuse.. I've moved to other tasks now. Will try again later.

[stsrki]

Something happened with modal opacity

[stsrki]

It seems the class on backdrop should be

bg-gray-900/50

instead of

bg-gray-900 bg-opacity-50