'Setting custom dark mode theme in Tailwind CSS config?

I'd like to use custom themes in Tailwind config to set primary/secondary colors for light and dark mode. The Tailwind docs only go over using classes in an html/jsx element like so:

<div class="bg-white dark:bg-slate-900...

Instead of declaring this on every element in my app, I'd like to do the following:

<div class="bg-primary text-secondary" />

and then in config, define something like:

colors: {
  light: {
    primary: "white",
    secondary: "black",
  }
  dark: {
    primary: "black",
    secondary: "white",
  }
}

Does anyone know of a way to do this? I am using Tailwind with React.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source