Tailwind colors based on dark mode

Question

Is there any way to define different colors in the tailwind config so that the dark mode are applied without the dark selector?

Currently I have an object like:

const colors = {
 light: {
    red: {
     100: "#880808",
    ...
    }
  },
 dark: {
    red: {
     100: "red",
    ...
    }
  },

} 

I'd like to just use red-100 and have the color be mapped automatically (just via bg-red-100) without having to specify bg-red-100 dark:bg-red-dark-100

Answer 1

One trick that you can make use of is by extracting as components.

In your tailwind stylesheet

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .red-bg {
    @apply bg-red-100 dark:bg-red-dark-100;
  }
}

Then you can use it as

<div class="red-bg"></div>

and it work as intended. However, it would be a best practice to use other approaches in re-using the styles since it would be inconvenient to extend this trick to all colors used in your project.