Apply dark mode to the element that itself has dark class

[RheingoldRiver]

Right now, you need a parent element to have the dark class. But if you want to add a background color depending on dark parent to the first element in your DOM structure, that means you basically need to create a container that's doing nothing.

Could the classes used in the same element as the one with .dark on it, get an additional selector that also makes .dark.dark\:whatever-class-here dark mode?

[alex-krasikau]

Hey @RheingoldRiver, thanks for the question!

In order to do so, you can add a custom variant that will handle it the way you described. There're two options:

• Create a custom variant, that handles both, container and children: addVariant('custom-dark', ['.dark&', ':is(.dark &)']). This is a bit less performant, as it generates a pair of class declaration for each appearance.
• Another option is to add a variant that only handles container: addVariant('self-dark', '.dark&').

You can see both options in action here - https://play.tailwindcss.com/dGzSg9OMAA

[RheingoldRiver]

Fantastic, thanks so much!