# How to Define Secondary Colors in DaisyUI: Tailwind Config and CSS Variable Methods

> Easily define secondary colors in DaisyUI using Tailwind CSS config or CSS variables. Learn to map custom hex or OKLCH values for flexible theming.

- Repository: [Pouya Saadeghi/daisyui](https://github.com/saadeghi/daisyui)
- Tags: how-to-guide
- Published: 2026-07-10

---

**You can define secondary colors in DaisyUI by mapping a custom hex code or OKLCH value to the `secondary` key in your Tailwind configuration, which DaisyUI automatically converts to the `--color-secondary` CSS variable used by utility classes.**

DaisyUI, the popular Tailwind CSS component library maintained in the `saadeghi/daisyui` repository, exposes its semantic color palette through CSS custom properties. When you need to customize the secondary color scheme for buttons, backgrounds, or text, you modify the theme object that DaisyUI processes through its internal variable generation system.

## Understanding DaisyUI's Color Variable System

DaisyUI stores all theme colors as CSS variables following the pattern `--color-{name}` and `--color-{name}-content`. For the secondary palette, the library reads from `--color-secondary` for backgrounds and `--color-secondary-content` for foreground text.

According to the source code in [`packages/daisyui/functions/variables.js`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/functions/variables.js), DaisyUI maps semantic names like `secondary` directly to these CSS variables. When you define a custom theme, the [`generateThemesObject.js`](https://github.com/saadeghi/daisyui/blob/main/generateThemesObject.js) file processes your configuration and passes it to [`themePlugin.js`](https://github.com/saadeghi/daisyui/blob/main/themePlugin.js), which injects the values into your compiled stylesheet.

## Method 1: Define Secondary Colors via Tailwind Configuration

The recommended approach for project-wide theming uses the `daisyui.themes` array in your Tailwind config file. This method ensures consistent regeneration of CSS variables during the build process.

Add a custom theme object containing the `secondary` and `secondary-content` keys:

```javascript
// tailwind.config.js
module.exports = {
  daisyui: {
    themes: [
      {
        mytheme: {
          primary: "#570df8",
          "primary-content": "#ffffff",
          
          // Define your secondary colors here
          secondary: "#ff6b6b",
          "secondary-content": "#ffffff",
          
          accent: "#f000b8",
          neutral: "#3d4451",
          // ... other colors
        },
      },
      // Include built-in themes if needed
      "light",
      "dark",
    ],
  },
}

```

After rebuilding your CSS, apply the secondary palette using standard DaisyUI utility classes:

```html
<button class="btn btn-secondary">Secondary Action</button>
<div class="bg-secondary text-secondary-content p-4">
  Secondary container with auto-adjusted text
</div>

```

The [`themeOrder.js`](https://github.com/saadeghi/daisyui/blob/main/themeOrder.js) file in [`packages/daisyui/functions/themeOrder.js`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/functions/themeOrder.js) determines how DaisyUI prioritizes multiple themes when present in your configuration.

## Method 2: Override Secondary Colors with Custom CSS

For quick adjustments or scoped overrides without modifying your build configuration, set the CSS variables directly. DaisyUI reads these variables at runtime, allowing instant updates to all components using the secondary token.

Apply globally through the `:root` selector:

```css
/* In your global.css or after DaisyUI imports */
:root {
  --color-secondary: #ff6b6b;
  --color-secondary-content: #ffffff;
}

```

Or scope the override to specific elements using inline styles:

```html
<div class="card" style="--color-secondary:#ff6b6b; --color-secondary-content:#fff;">
  <button class="btn btn-secondary">Scoped Secondary</button>
</div>

```

Because DaisyUI utility classes reference these variables rather than static values, any change to `--color-secondary` immediately propagates to `bg-secondary`, `text-secondary`, `btn-secondary`, and other secondary-dependent components.

## Technical Implementation in the DaisyUI Codebase

The color generation pipeline in `saadeghi/daisyui` follows this specific file hierarchy:

- **[`packages/daisyui/functions/variables.js`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/functions/variables.js)** – Defines the mapping from semantic color names (`secondary`, `secondary-content`) to CSS variable names (`--color-secondary`, `--color-secondary-content`).

- **[`packages/daisyui/functions/generateThemesObject.js`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/functions/generateThemesObject.js)** – Consumes your [`tailwind.config.js`](https://github.com/saadeghi/daisyui/blob/main/tailwind.config.js) theme definitions and structures them for the Tailwind plugin API.

- **[`packages/daisyui/functions/themePlugin.js`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/functions/themePlugin.js)** – Core Tailwind plugin that injects the final CSS variables into the stylesheet output.

- **[`packages/daisyui/functions/themeOrder.js`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/functions/themeOrder.js)** – Manages precedence when multiple themes are active, ensuring your custom secondary colors apply correctly when switching themes.

## Summary

- **Define secondary colors** in DaisyUI by adding the `secondary` and `secondary-content` keys to a custom theme object in [`tailwind.config.js`](https://github.com/saadeghi/daisyui/blob/main/tailwind.config.js).
- **Global CSS overrides** work by setting `--color-secondary` and `--color-secondary-content` on the `:root` element.
- **Scoped overrides** apply by setting the same CSS variables on specific HTML elements.
- DaisyUI's internal processing in [`variables.js`](https://github.com/saadeghi/daisyui/blob/main/variables.js) and [`themePlugin.js`](https://github.com/saadeghi/daisyui/blob/main/themePlugin.js) converts your configuration into runtime CSS custom properties consumed by utility classes like `btn-secondary` and `bg-secondary`.

## Frequently Asked Questions

### What is the difference between `secondary` and `secondary-content` in DaisyUI?

`secondary` defines the main background color for components like buttons and badges, while `secondary-content` specifies the foreground text or icon color that appears on top of that background. DaisyUI uses this pairing to ensure accessible contrast ratios across all secondary-themed elements.

### Can I define secondary colors without using the Tailwind config file?

Yes. You can bypass [`tailwind.config.js`](https://github.com/saadeghi/daisyui/blob/main/tailwind.config.js) entirely by setting the `--color-secondary` CSS variable directly in your stylesheet or HTML style attributes. However, using the Tailwind configuration method is recommended for maintainability and ensures the colors are included in DaisyUI's theme generation pipeline handled by [`generateThemesObject.js`](https://github.com/saadeghi/daisyui/blob/main/generateThemesObject.js).

### Why are my secondary color changes not showing up after editing the config?

DaisyUI generates CSS variables at build time. If you modify [`tailwind.config.js`](https://github.com/saadeghi/daisyui/blob/main/tailwind.config.js), you must restart your development server or rebuild your project to trigger the processing in [`themePlugin.js`](https://github.com/saadeghi/daisyui/blob/main/themePlugin.js). Additionally, verify that your HTML element has the correct `data-theme` attribute matching your custom theme name, or that your custom theme is listed first in the DaisyUI themes array.

### Does DaisyUI support OKLCH or HSL values for secondary colors?

Yes. DaisyUI supports any valid CSS color value in the theme configuration, including hex, RGB, HSL, and OKLCH. The [`variables.js`](https://github.com/saadeghi/daisyui/blob/main/variables.js) function passes these values directly to the CSS custom properties, so you can use modern color spaces like `oklch(70% 0.2 10)` for your secondary color definitions.