Using Tailwind dark variant with custom classes

user_2069120 0
Viewed 434

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:

`style.css`
.card-background {
    @apply bg-black;
}

`index.html`
<div class="bg-white dark:card-background">
    Hello, world
</div>
tailwind-css
1 Answers

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