Using Tailwind dark variant with custom classes

Question

Does tailwind allow the dark variant to work with custom classes?

Consider this simple working example:

<div class="bg-white dark:bg-black">
    Hello, world
</div>

The above will apply a black background to the element, but if try to use a custom class, then it won't:

.card-background {
    @apply bg-black;
}

<div class="bg-white dark:card-background">
    Hello, world
</div>

Answer 1

You have two way,

• if you want to work just with colors, you can insert your colors into tailwind config file

• if not you must define the dark class for every custom classes that you need.

for example

 .dark {
   .dark\:card-background {
     @apply bg-black;
   }
 }