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>

Erfan HosseinPoor · Accepted Answer · 2021-10-17 08:50:11Z

6

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;
   }
 }

answered Oct 17, 2021 at 8:50

Erfan HosseinPoor

1,0877 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

felix0808 · Accepted Answer · 2023-06-28 09:12:43Z

0

There is a problem with cssModules, and especially with css-loader.

answered Jun 28, 2023 at 9:12

felix0808

812 silver badges5 bronze badges