Blazorise icon indicating copy to clipboard operation
Blazorise copied to clipboard

[2.0] Flowbite and tailwind to the latest versions

Open tesar-tech opened this issue 1 year ago • 2 comments

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).

tesar-tech avatar Mar 10 '25 18:03 tesar-tech

Something happened with modal opacity

image

stsrki avatar Mar 11 '25 08:03 stsrki

It seems the class on backdrop should be

bg-gray-900/50

instead of

bg-gray-900 bg-opacity-50

stsrki avatar Mar 11 '25 08:03 stsrki