[2.0] Flowbite and tailwind to the latest versions
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-5and similar isn't even valid. -
b-accordionand otherb-prefixed classes will be included via the import ofblazorise.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).
Something happened with modal opacity
It seems the class on backdrop should be
bg-gray-900/50
instead of
bg-gray-900 bg-opacity-50