Tailwind 4 compatibility

[calebporzio]

This issue will house sub-issues related to Tailwind 4 compatibility

[nmfirdausw]

Had issue with searchable select here with Tailwind v4.

The list is not filtered when search,
No results found is shown at the bottom,
And the check Icon show at above of the selection, not side by side

[joshhanley]

@nmfirdausw thanks for the info! Yep, see the linked issue #783 with what is going on. We will investigate it once it gets closer to the release incase it's just a bug with Tailwind 4.

[marksalmon]

@nmfirdausw If you want a quick and dirty fix while you're waiting, it can be done by publishing the select component and tweaking the following tailwind utility classes:

options.blade.php

- <ui-empty class="data-[hidden]:hidden">{{ $empty }}</ui-empty>
+ <ui-empty class="data-hidden:hidden!">{{ $empty }}</ui-empty>

option.blade.php

$classes = Flux::classes()
-   ->add('group/option overflow-hidden data-[hidden]:hidden group flex items-center px-2 py-1.5 w-full focus:outline-none')
+   ->add('group/option overflow-hidden data-hidden:hidden! group flex! items-center px-2 py-1.5 w-full focus:outline-none')

empty.blade.php

$classes = Flux::classes()
-   ->add('data-[hidden]:hidden block items-center px-2 py-1.5 w-full')
+   ->add('data-hidden:hidden! block items-center px-2 py-1.5 w-full')

[nmfirdausw]

@marksalmon Thanks. Will use that for a while.

[timkley]

FYI, Tailwind CSS v4 has been released: https://tailwindcss.com/blog/tailwindcss-v4

[joshhanley]

@timkley thanks!

[joshhanley]

@timgavin yeah Flux currnently isn't compatible with Tailwind V4. We've got a solution but it has breaking changes, so we're just working through that at the moment. See https://x.com/calebporzio/status/1881450082459070494

[timgavin]

@timgavin yeah Flux currnently isn't compatible with Tailwind V4. We've got a solution but it has breaking changes, so we're just working through that at the moment. See https://x.com/calebporzio/status/1881450082459070494

I looked on his account and totally missed that! thanks!

Deleted my comment so as to not clutter up the thread.

[cjmellor]

I haven't seen it mentioned anywhere else, so it might just be me, but I doubt it as everything was fine prior to the upgrade.

I know there was a dark mode bug fixed in the latest release, but after upgrading to v4, that has stopped working again. Perhaps something to do with how dark mode is handled now in v4?

@custom-variant dark (&:where(.dark, .dark *));

Just wanted to bring this to attention in case it was a bug.

[jeffchown]

@cjmellor Per @joshhanley 's comment yesterday (#811 (comment)), Flux is not yet Tailwind v4 compatible.

[joshhanley]

@cjmellor thanks! Yep, I found that dark mode issue when I was testing the other week, so it should be fixed once we release Tailwind v4 support.