The #client-error and #server-error toasts don't work with Tailwind 4.

[Huxelpux]

The standard #client-error and #server-error toasts don't work with Tailwind 4.

The reason seems to be that they both have a hidden attribute, which is not reset ever. With Tailwind 3, the class takes precedence over the hidden attribute, in Tailwind 4 the hidden attribute takes precedence over the class.

[srcrip]

Interesting, thank you for the report! Should be pretty easy to fix.

[Huxelpux]

I suspect opacity must also be fixed - if one removes the hidden attribute in the browser inspector, the toasts still cannot be seen, as they have an opacity of 0%.

[dfalling]

For me the positioning doesn't work (it's full width instead of anchored in a corner), and the close icon isn't visible:

[srcrip]

This turns out to be a bit more complicated than at first glance, because the library doesn't ship it's own CSS, it just assumes you're going to use TW, and ships the markup of the components with TW css, and has you point your TW config at the lib.

TW 4 also has breaking default changes. So if I were to change things to work in v4, it would mean they wouldn't work right in v3 any more.

We'll have to think through the right approach here. I can't assume everyone is ready to move to v4 and just break it for everyone else. But also maintaining two versions seems like it would really suck.

[srcrip]

Ok, I've given this some thought and I think a good path forward may actually be that the consumers of this library totally own their 'toast component' code, ie., we use a generator to paste it into your components file or just ask you to copy it in yourself. That way we could just have a TW v3 and v4 version.

The only tricky thing is we also have classes on the toast group container. I'm not quite sure what to do about that cause ideally you wouldn't also need to copy that in. But I don't know. Going to give it some more thought.

[dfalling]

Could the user own the group container too? For example, the generator could create a new lib/__myapp__web/components/live_toast.ex component that has the html for the container and the individual flash elements? We then import that <.live_toast /> in our layouts instead of the <LiveToast.toast_group.

Then we also wouldn't need corner={:top_right} as we could tweak that directly ourselves.

[dmkenney]

Yeah, I have the same issue as @dfalling.

Wouldn't the best approach just be to ship the CSS with the library?