Addon ignores TailwindCSS dark mode

[william-ford-rq]

Hey! Great work on this storybook addon, I would love to use it in my project, but I found a small issue while setting it up:

As I'm building a design system using TailwindCSS in light and dark mode, I have components that will have combinations of classes like for example bg-success-700, hover:bg-success-800, and dark:hover:bg-success-600. If you're unfamiliar, this means that in any normal case I want the background color of the element to be "success-700", and the hover background color to be "success-800", but if dark mode is activated, I want the hover background color to be "success-600". You enable dark mode by adding a "dark" class to one of the component's parent elements.

However, the addon seems to ignore the dark mode this example of classes, and only shows the light mode hover behavior, even if dark mode is enabled. It seems that only the classes .hover\:bg-success-800:hover, .hover\:bg-success-800.pseudo-hover, and .pseudo-hover-all .hover\:bg-success-800 are correctly generated.

I am also seeing this class being generated: :is(.dark .dark\:hover\:bg-success-600:hover), :is(.dark .dark\.pseudo-hover\:bg-success-600.pseudo-hover), .pseudo-hover-all.pseudo-hover-all :is(), but it (especially the last one) looks a bit weird and I can only see it in my active styles when I manually enable the :hover element state from my browser devtools.

If I disable the addon, only these classes are generated by TailwindCSS: .hover\:border-success-800:hover and :is(.dark .dark\:hover\:bg-success-600:hover)

Is there currently a nice way to resolve this issue in the addon? Do you have an idea for a configuration/feature/bugfix that could solve this issue? I'm happy to submit a PR if necessary.

[apetta]

+1
This is currently a blocker for me as well

[apetta]

A temporary workaround is to ensure the hover/focus modifier goes first. i.e. hover:dark:bg-zinc-800 instead of dark:hover:bg-zinc-800