How to have custom darkmode colors with Tailwind

Question

I am trying to set up Tailwind for my project (this is my first time using it), but can't figure out how I'm supposed to define colors for dark and light themes; is there a way to do something like this:

@tailwind base;
@tailwind components;
@tailwind utilities;
@dark
{
   --red: #FFC8C8;
}
@light
{
   --red: #F00000;
}

module.exports = {
   darkMode: 'class',
   theme: {
      extend: {
         'red': 'var(--red)',
      }
   }
};

That is a hypothetical representation of what I'm trying to do. Unfortunately none of the tutorials I've found for Tailwind explain how to do anything like that. Is there a way to customize a darkmode palette with Tailwind? Thank you.

Answer 1

The simplest way is to give the custom class name and give it light and dark property in css file.

tailwind.config.js

const colors = require("tailwindcss/colors");

module.exports = {
  mode: "jit",
  darkMode: "media",
  content: ["./src/**/*.{js,jsx}", "./public/index.html"],
  theme: {
    extend: {
      colors: {
        red: {
          dark: "#FFC8C8",
          light: "#F00000",
        },
    },
  },
  plugins: [],
};

index.css

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

@layer base {
  .redcolor {
      @apply text-red-light dark:text-red-dark;
}

apply this way.

 <div className=" p-4 redcolor">Hello</div>

Light Mode:

Dark Mode: