How to use custom color themes in TailwindCSS v4

My tailwind.config.js in v3 looks like this, but I can't find a way to use it in v4:

theme: {
  extend: {
    colors: {
      lightHover: '#fcf4ff',
      darkHover: '#2a004a',
      darktheme: '#11001f',
    },
    fontFamily: {
      Outfit: ["Outfit", "sans-serif"],
      Ovo: ["Ovo", "serif"]
    },
    boxShadow: {
      'black': '4px 4px 0 #000',
      'white': '4px 4px 0 #fff',
    },
    gridTemplateColumns: {
      'auto': 'repeat(auto-fit, minmax(200px, 1fr))'
    }
  },
},
darkMode: 'selector',

This is a piece of code for v3,and I can customize the color of the dark theme instead of using black like this:

<div className="dark:bg-darktheme"></div>

But how can I do the same thing in v4? Does anyone have the same problem? Just write bg-black?

Can't find detailed tailwind.config.js documentation.

Starting from TailwindCSS v4, the CSS-first configuration is preferred, meaning the init process and the tailwind.config.js file have been removed.

• CSS-first configuration - TailwindCSS v4 Blog
• Functions and directives - TailwindCSS v4 Docs
• New configuration option in v4 - StackOverflow

Customize theme with CSS-first directives

In a CSS-first configuration, several directives are available. For theme customization, you can primarily use the @theme directive:

@import "tailwindcss";

@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 120rem;
  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
  --color-avocado-300: oklch(0.94 0.11 115.03);
  --color-avocado-400: oklch(0.92 0.19 114.08);
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --color-avocado-600: oklch(0.53 0.12 118.34);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
  /* ... */
}

• @theme directive - TailwindCSS v4 Docs

Theme variables are defined in namespaces and each namespace corresponds to one or more utility class or variant APIs.

• Theme variable namespaces - TailwindCSS v4 Docs
• Default theme variable reference - TailwindCSS v4 Docs

Set dark directive with CSS-first

Starting from v4, a new @custom-variant directive is introduced, allowing you to customize the behavior of dark: or create your own custom variants, such as coffee:.

• @custom-variant directive - TailwindCSS v4 Docs
• @variant directive - TailwindCSS v4 Docs

Some useful similar question:

• How can I implement the dark mode in my project? - StackOverflow
• Change CSS custom value on theme in Tailwind v4 - StackOverflow
• How to disable dark mode in TailwindCSS v4 - StackOverflow
• TailwindCSS: How to do a light mode only modification? - StackOverflow
• TailwindCSS dark mode can't change or add class="dark" - StackOverflow

document.querySelector('button').addEventListener('click', () => {
  document.documentElement.classList.toggle('dark');
});

<script src="https://unpkg.com/@tailwindcss/browser"></script>
<style type="text/tailwindcss">
/* changed the behavior of dark: (default: based on prefers-color-scheme) to work based on the presence of the .dark parent class */
@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-pink: #eb6bd8;
}

@layer base {
  @variant dark {
    --color-pink: #8e0d7a;
  }
}
</style>

<button class="size-20 bg-pink dark:text-white">Click Here</button>
<div class="w-50 h-12 bg-purple-200 dark:bg-purple-900 dark:text-white">
  Lorem Ipsum
</div>

TailwindCSS v4 backwards compatibility with v3

However, you can revert to using the Tailwind v3-style tailwind.config.js by using the @config directive, like this:

@import "tailwindcss";

@config "../../tailwind.config.js";

• @config directive - TailwindCSS v4 Docs
• TailwindCSS v4 is backwards compatible with v3 - StackOverflow

Specifically TailwindCSS v4 configuration for your question

document.querySelector('button').addEventListener('click', () => {
  document.documentElement.classList.toggle('dark');
});

<script src="https://unpkg.com/@tailwindcss/browser"></script>
<style type="text/tailwindcss">
@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-light-hover: #fcf4ff;
  --color-dark-hover: #2a004a;
  --color-darktheme: #11001f;
  
  --font-Outfit: "Outfit", "sans-serif";
  --font-Ovo: "Ovo", "serif";
  
  --shadow-custom-size: 4px 4px 20px;
  
  --grid-auto: repeat(auto-fit, minmax(200px, 1fr));
}
</style>

<div class="bg-white dark:bg-black w-screen h-screen">
  <button class="cursor-pointer dark:text-purple-200">Toggle Dark Mode - Click Here</button>
  <div class="
    bg-light-hover dark:bg-dark-hover
    dark:text-white
    shadow-custom-size shadow-black dark:shadow-white
    p-4
  ">
    This background changes in dark mode!
  </div>
</div>

Observations:

• I would name the colors based on their actual meaning (e.g., purple, dark purple, light purple) rather than their usage context. The usage becomes clear when applied.
• Declaring shadow colors is unnecessary because the shadow's color must be passed separately. In @theme, you can place custom colors under the --color namespace and define custom shadow types under --shadow. However, shadow colors should not be included only their size can be specified.

What's breaking changes from v4?

Although it's not directly related to the question, I believe that if you have questions about tailwind.config.js, you might also find it interesting to learn about other breaking changes.

The @tailwind directive has been deprecated since v4. Use

@import "tailwindcss";

instead.

• Removed @tailwind directives - StackOverflow

Others:

• Cannot build frontend using TailwindCSS - StackOverflow
• Problem when use "npx tailwindcss init -p" command - StackOverflow
• Deprecated: Sass, Less and Stylus preprocessors support - StackOverflow
• Automatic Source Detection from TailwindCSS v4 - StackOverflow