Tailwind 4.0

[BCsabaEngine]

Summary

Tailwind 4.0 released, can I use it at my own risk. I would like you to allow tailwind 4 in packageJson.

[zoltanszogyenyi]

I wrote a guide here that you can follow:

https://flowbite.com/blog/tailwind-v4/

[BCsabaEngine]

I wrote a guide here that you can follow:

flowbite.com/blog/tailwind-v4

Thank you Zoltán!

[BCsabaEngine]

I have successfully adopted Zoltan's idea, Button work after it, but NavUl+NavLI is not visible. I see the new flowbite v3, installed but Nav* is invisible.

I see, the NavUI generated code is:

<div class="w-full md:block md:w-auto flex" hidden>

Solved by use like this: <NavUl class="flex" hidden={false}>

[samankittani]

I have successfully adopted Zoltan's idea, Button work after it, but NavUl+NavLI is not visible. I see the new flowbite v3, installed but Nav* is invisible.

I see, the NavUI generated code is:

<div class="w-full md:block md:w-auto flex" hidden>

Solved by use like this: <NavUl class="flex" hidden={false}>

This fix doesn't solve the problem. Those buttons should be hidden until the hamburger button is pressed. This approach makes the menu for small width screens always open. For wider screens, the navbar should have text based li elements. Not sure why this bug occurs, but switching to tailwind v3 was the approach I took for the time being

[AlexSwensen]

There are a number of issues I have found related to nav and navbar once updating to svelte 4.
AlexSwensen/alexswensen.io#36

If you checkout the current page at https://alexswensen.io you can see links at the top right, but in the pr, those disappear.

[printfn]

When updating to Tailwind 4, the bg-opacity-* props that <Modal /> sets no longer work. It needs to be replaced with e.g. bg-gray-900/50. It looks like that's also supported in Tailwind 3 so it should be backwards-compatible.

See https://tailwindcss.com/docs/upgrade-guide#removed-deprecated-utilities

[jjagielka]

The new tag TW4 was issued. Can you please check if it works OK?

• Tailwindcss v4
• NavUl should work now - with TW4.

[shinokada]

Renamed the tag to v0.48.0.

[BCsabaEngine]

The new tag TW4 was issued. Can you please check if it works OK?

• Tailwindcss v4
• NavUl should work now - with TW4.

Hi, I would like to give a feedback: it works like in TW3, and classBackdrop="bg-black/50" is unneccessary too with this version. Great work, thank you!

I do not want to close issue, because it has mixed content by others. Please close if you think.

[printfn]

Just tested v0.48.3 and it seems to work great with Tailwind 4! Thank you!

[superstes]

Just as I ran into it:
Note that the current quickstart-documentation will get users to install tailwind v4 and they might run into issues while this is still in-progress.

Maybe this could be mentioned in the docs?
Took me (new to tailwind+flowbite) way too long to realize that this was the case..
Also the documented @import 'tailwindcss'; statement seems to result in an error when tailwindcss@3 is used.