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

> Learn three ways to import DaisyUI color configurations into Tailwind CSS. Use CSS custom properties via plugin, CSS bundle, or direct variable references.

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

---

**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`](https://github.com/saadeghi/daisyui/blob/main/tailwind.config.js) (or `.cjs`). According to the source code in [[`themePlugin.js`](https://github.com/saadeghi/daisyui/blob/main/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/main/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:

```javascript
// 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:

```javascript
// 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/main/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/main/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:

```bash

# From the repository root

npm run build   # Creates dist/daisyui.css

```

Then import the built CSS in your project:

```css
/* 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.

```css
/* 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/main/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/main/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/main/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`](https://github.com/saadeghi/daisyui/blob/main/daisyui.css) bundle.
- **[[`build.js`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/tailwind.config.js) to generate custom CSS variables at build time via [`themePlugin.js`](https://github.com/saadeghi/daisyui/blob/main/themePlugin.js).
- **CSS Bundle Method**: Import [`daisyui/dist/daisyui.css`](https://github.com/saadeghi/daisyui/blob/main/daisyui/dist/daisyui.css) directly after running the build pipeline through [`packCss.js`](https://github.com/saadeghi/daisyui/blob/main/packCss.js) and [`build.js`](https://github.com/saadeghi/daisyui/blob/main/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/main/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`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/themePlugin.js) function merges your overrides with the default theme definition from [`variables.js`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/tailwind.config.js), as the [`themePlugin.js`](https://github.com/saadeghi/daisyui/blob/main/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`](https://github.com/saadeghi/daisyui/blob/main/dist/daisyui.css) via [`build.js`](https://github.com/saadeghi/daisyui/blob/main/build.js). Additionally, check for CSS specificity issues or cached stylesheets that might prevent new variable values from appearing.