Active sidebar navlist item invisible in dark mode

[rootuser]

Flux version

v1.1.4

Livewire version

v3.5.19

Tailwind version

v4.0.0

What is the problem?

Hi,

not a big issue, but I noticed that the active item on a navlist is not visible in dark mode.
When active, the item basically shows the background color of a hovered item, but no text.

I viewed the item in the browsers HTML inspector, and these are the classes used effectively on the navitems a tag:

<a class="h-10 lg:h-8 relative flex items-center gap-3 rounded-lg py-0 text-left w-full px-3 my-px text-zinc-500 dark:text-white/80 data-[current]:text-[var(--color-accent-content)] hover:data-[current]:text-[var(--color-accent-content)] data-[current]:bg-white dark:data-[current]:bg-white/[7%] data-[current]:border data-[current]:border-zinc-200 dark:data-[current]:border-transparent hover:text-zinc-800 dark:hover:text-white dark:hover:bg-white/[7%] hover:bg-zinc-800/5 border border-transparent">

The problem seems to be "dark:data-[current]:bg-white/[7%]". When I remove this class, everything seems to be fine.

Could you please have a look at this?

Kind regards, Tom

Code snippets

Just pick the basic original sidebar example from fluxui.dev: https://fluxui.dev/layouts/sidebar

How do you expect it to work?

The background of the active item should simply be white(-ish) and the text dark, so the item can be seen properly.

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[jeffchown]

@rootuser The current release of Flux is not compatible with Tailwind 4.

The needed update has been beefed to main but not yet released.

#811

[rootuser]

@jeffchown Thanks for your answer! I'm sorry to have bothered you with this; I could have guessed that myself...

[jeffchown]

No worries @rootuser.

[jeffchown]

@rootuser UPDATE: Based on an email Caleb sent this morning, it looks like Tailwind 4 compatibility will be launched with Flux 2.0 on Feb. 19th along with new components!:

• Calendar
• Date picker
• Date range picker
• Line & Area Charts

[joshhanley]

@rootuser thanks for reporting! Yep @jeffchown is correct Flux doesn't support Tailwind v4 but that is coming in Flux v2. So I'm going to close this issue. If the problem still happens once v2 has been released, then feel free to open a new issue.