How to Import DaisyUI Color Configurations: Three Methods for Tailwind CSS

DaisyUI exposes its color palette as CSS custom properties that you can import via the Tailwind config plugin, a pre-built CSS bundle, or direct CSS variable references.

DaisyUI, the popular Tailwind CSS component library, manages its color system through CSS custom properties generated by the theme plugin. When you need to customize the default palette or load existing themes, understanding how to import DaisyUI color configurations ensures your design tokens remain consistent across components. This guide demonstrates three approaches based on the actual source implementation in the saadeghi/daisyui repository.

Method 1: Import via Tailwind Config (Recommended)

The most common way to import DaisyUI color configurations is through the daisyui property in your tailwind.config.js (or .cjs). According to the source code in [themePlugin.js](https://github.com/saadeghi/daisyui/blob/master/packages/daisyui/functions/themePlugin.js), the plugin reads your theme definitions, merges them with the default token map defined in [variables.js](https://github.com/saadeghi/daisyui/blob/master/packages/daisyui/functions/variables.js), and outputs CSS variables to :root or a custom selector.

Creating a Custom Theme

Define a complete theme object within the themes array:

// tailwind.config.cjs
module.exports = {
  content: ['./src/**/*.{html,js,ts,svelte,vue}'],
  plugins: [require('daisyui')],
  daisyui: {
    themes: [
      {
        mytheme: {
          primary: '#ff6600',
          'primary-content': '#ffffff',
          secondary: '#1e40af',
          'secondary-content': '#ffffff',
          accent: '#0f766e',
          'accent-content': '#ffffff',
          neutral: '#111827',
          'neutral-content': '#ffffff',
          'base-100': '#ffffff',
          'base-200': '#f9fafb',
          'base-300': '#e5e7eb',
          // additional tokens...
        },
      },
    ],
    // Optional: change the CSS selector where variables are injected
    // root: '.my-root', // default is ':root'
  },
}

Extending Existing Themes

Override specific tokens while keeping the rest of a built-in theme:

// tailwind.config.cjs
module.exports = {
  plugins: [require('daisyui')],
  daisyui: {
    themes: [
      {
        dark: {
          // Only override specific colors
          primary: '#ff6600',
        },
      },
    ],
  },
}

When Tailwind builds, the plugin processes these configurations and emits CSS variables such as --color-primary and --color-base-100, which DaisyUI components reference automatically.

Method 2: Import the Pre-Generated CSS Bundle

If you prefer not to configure themes through JavaScript, you can import the complete CSS bundle that already contains the color variable definitions. The [packCss.js](https://github.com/saadeghi/daisyui/blob/master/packages/daisyui/functions/packCss.js) script bundles the component CSS with generated color CSS files, while [build.js](https://github.com/saadeghi/daisyui/blob/master/packages/daisyui/build.js) serves as the CLI entry point that produces the distributable files.

First, build the CSS from the repository:

# From the repository root

npm run build   # Creates dist/daisyui.css

Then import the built CSS in your project:

/* src/app.css */
@import "daisyui/dist/daisyui.css";

/* Optional: Override specific variables after import */
:root {
  --color-primary: #ff6600;
}

This method imports all color configurations immediately, making them available without additional build-time processing.

Method 3: Reference CSS Variables Directly

Because DaisyUI exposes colors as CSS custom properties, you can reference them in your own stylesheets regardless of which import method you used. The variables follow the naming pattern --color-{token} and update automatically when themes switch at runtime.

/* src/custom.css */
.my-card {
  background-color: var(--color-base-100);
  color: var(--color-neutral-content);
  border-color: var(--color-primary);
}

This approach works with any active theme, as the underlying variable values change dynamically while your class references remain constant.

Key Source Files for Color Configuration

Understanding these core files helps troubleshoot import issues:

• [variables.js](https://github.com/saadeghi/daisyui/blob/master/packages/daisyui/functions/variables.js) – Defines the default mapping of DaisyUI tokens (e.g., primary) to CSS variable names (var(--color-primary)).
• [themePlugin.js](https://github.com/saadeghi/daisyui/blob/master/packages/daisyui/functions/themePlugin.js) – Core plugin that merges user-supplied themes with built-in defaults, generates the :root CSS-variable block, and handles prefers-color-scheme logic.
• [packCss.js](https://github.com/saadeghi/daisyui/blob/master/packages/daisyui/functions/packCss.js) – Concatenates component CSS with generated color CSS into the final daisyui.css bundle.
• [build.js](https://github.com/saadeghi/daisyui/blob/master/packages/daisyui/build.js) – CLI entry point that executes the bundling pipeline and creates distributable CSS files.

Summary

• Tailwind Config Method: Configure the daisyui.themes array in tailwind.config.js to generate custom CSS variables at build time via themePlugin.js.
• CSS Bundle Method: Import daisyui/dist/daisyui.css directly after running the build pipeline through packCss.js and build.js.
• Direct Variable Method: Reference var(--color-{token}) in your CSS to use DaisyUI's color system without additional configuration.
• DaisyUI stores colors as CSS custom properties in [variables.js](https://github.com/saadeghi/daisyui/blob/master/packages/daisyui/functions/variables.js), making them runtime-switchable and framework-agnostic.

Frequently Asked Questions

How do I override a single color in an existing DaisyUI theme?

Extend the theme object in your tailwind.config.js by specifying only the tokens you want to change. For example, to change the primary color in the dark theme, add { dark: { primary: '#ff6600' } } to the daisyui.themes array. The themePlugin.js function merges your overrides with the default theme definition from variables.js, preserving all other color values.

Can I use DaisyUI color configurations without installing the Tailwind plugin?

Yes. You can import the pre-built CSS file directly using @import "daisyui/dist/daisyui.css" in your stylesheet. This file, generated by packCss.js, contains all color variable definitions in the :root selector. You can then override specific variables in your own CSS or use them as-is without any JavaScript configuration.

What CSS variables does DaisyUI generate for colors?

DaisyUI generates CSS custom properties following the pattern --color-{token} for each theme token defined in variables.js. Common variables include --color-primary, --color-secondary, --color-accent, --color-neutral, --color-base-100, --color-base-200, and their corresponding content colors like --color-primary-content. These variables are injected into :root by default, or into a custom selector if specified in your config.

Why are my DaisyUI color changes not reflecting in the browser?

Ensure you have rebuilt your Tailwind CSS after modifying tailwind.config.js, as the themePlugin.js only generates color variables during the build process. If importing the CSS bundle directly, verify that npm run build was executed to update dist/daisyui.css via build.js. Additionally, check for CSS specificity issues or cached stylesheets that might prevent new variable values from appearing.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}