How to Use DaisyUI Colors in CSS: Semantic Variables and Utility Classes Explained

DaisyUI provides semantic color utilities that map to CSS custom properties, allowing you to use Tailwind-compatible classes like bg-primary and text-base-content that automatically adapt to any active theme.

DaisyUI extends Tailwind CSS by introducing a semantic color system built on CSS variables. Instead of hardcoding hex codes, you reference abstract names like primary or base-100, which the plugin resolves to theme-specific values via custom properties such as --color-primary and --color-base-100. This approach, as implemented in the saadeghi/daisyui repository, enables instant theme switching without changing utility classes.

Understanding the DaisyUI Color Architecture

DaisyUI defines a fixed set of semantic color names that remain constant across all themes. According to the color definitions in [skills/daisyui/colors/SKILL.md](https://github.com/saadeghi/daisyui/blob/master/skills/daisyui/colors/SKILL.md) (lines 9-28), the system includes names such as:

• Base colors: base-100, base-200, base-300, base-content
• Accent colors: primary, secondary, accent, neutral
• Content colors: primary-content, secondary-content, accent-content, neutral-content
• State colors: info, success, warning, error

Each semantic name maps to a CSS custom property in the format --color-{name}. For example, primary maps to --color-primary, and base-100 maps to --color-base-100. These variables are defined in the same file (lines 17-28) and are populated by whichever theme is currently active on the document root or a parent element.

Using DaisyUI Color Utilities

DaisyUI generates Tailwind-compatible utility classes that resolve to these CSS variables. As documented in packages/docs/src/routes/(routes)/docs/utilities/+page.md (line 19), you can apply colors using standard Tailwind syntax:

<!-- Background and text colors -->
<div class="bg-primary text-primary-content p-6 rounded-box">
  This container uses the primary color for background
</div>

<!-- Border colors -->
<div class="border-secondary text-secondary-content p-4">
  Secondary border with matching text color
</div>

The bg-{color} utility sets background-color: var(--color-{color}), while text-{color} sets color: var(--color-{color}). Content colors (e.g., primary-content, base-content) are specifically designed to provide accessible contrast against their respective background colors.

Opacity Modifiers and Alpha Channels

You can adjust the opacity of any DaisyUI color utility by appending a slash followed by a value from 0-100. As shown in packages/docs/src/routes/(routes)/docs/colors/+page.md (lines 76-82), this syntax works with any color utility:

<div class="bg-primary/40 text-primary-content/80 p-4">
  40% opacity primary background with 80% opacity text
</div>

<div class="bg-base-100/50 border-base-300/20 p-6">
  Semi-transparent card background and border
</div>

When using the CDN version without a build step, opacity modifiers work with preset steps (10, 20, 30, ..., 90).

Accessing Raw CSS Variables in Custom Styles

For custom CSS outside the Tailwind utility layer, reference the CSS variables directly using var(). This is useful when writing traditional stylesheets or inline style attributes:

/* custom.css */
.my-card {
  background-color: var(--color-base-100);
  border: 2px solid var(--color-base-300);
  color: var(--color-base-content);
}

.highlight {
  background-color: var(--color-accent);
  color: var(--color-accent-content);
}

<link rel="stylesheet" href="/custom.css">
<div class="my-card p-6 rounded-box">
  Component styled with DaisyUI CSS variables
</div>

Theme-Aware Color Switching

Because DaisyUI colors rely on CSS variables rather than static values, colors automatically update when you change themes. The theme sets the variable values, and any element using bg-primary or text-base-content immediately reflects the new palette. You can apply themes to specific containers using the data-theme attribute:

<div data-theme="nord" class="bg-base-200 p-8 rounded-box">
  <p class="text-base-content">This uses Nord theme colors</p>
</div>

<div data-theme="dracula" class="bg-base-200 p-8 rounded-box">
  <p class="text-base-content">This uses Dracula theme colors</p>
</div>

Both containers use identical utility classes but render different actual colors based on the active theme's variable definitions.

Using DaisyUI Colors via CDN

When loading DaisyUI through a CDN without a build process, all color utilities remain available. The CSS variables are defined in [properties.css](https://cdn.jsdelivr.net/npm/daisyui@5/colors/properties.css), which is included in the distribution. Note that opacity modifiers may be limited to specific increments (10-90) when using pre-built CDN files.

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet">
<div class="bg-primary text-primary-content p-4">
  Works without npm install or Tailwind build step
</div>

Summary

• Semantic naming: DaisyUI uses abstract color names (primary, base-100) that map to CSS variables (--color-primary, --color-base-100) as defined in skills/daisyui/colors/SKILL.md.
• Utility classes: Use standard Tailwind patterns like bg-primary, text-secondary-content, and border-accent.
• Opacity support: Append /50 (or similar) to any color utility for alpha transparency without custom CSS.
• Custom CSS: Access variables directly with var(--color-name) in your stylesheets.
• Theme adaptability: Colors automatically update when switching themes via data-theme attributes because only the variable values change, not the class names.
• CDN compatible: Full color functionality works via CDN, though opacity steps may be predefined.

Frequently Asked Questions

What is the difference between primary and primary-content in DaisyUI?

primary defines the main accent color (e.g., a button background), while primary-content defines the text color that should be used on top of primary to ensure accessible contrast. According to the color documentation, you should always pair bg-primary with text-primary-content to maintain readability across all themes.

Can I use DaisyUI color variables in my own custom CSS files?

Yes. After importing DaisyUI, reference the CSS variables directly using var(--color-name) syntax. For example, background-color: var(--color-base-100) uses the current theme's base background color. These variables are globally available once the DaisyUI CSS is loaded, whether via npm build or CDN.

How do opacity modifiers work with DaisyUI theme colors?

You can append / followed by a percentage (0-100) to any color utility class, such as bg-primary/40 for 40% opacity. As documented in the colors page (lines 76-82), this generates CSS that applies the alpha channel to the CSS variable, preserving the theme-aware color while adjusting transparency.

Why do my DaisyUI colors look different when I switch themes?

This is the intended behavior. DaisyUI colors are semantic—the class bg-primary always maps to var(--color-primary), but the actual value of that variable changes based on the active theme defined by the data-theme attribute. If you need consistent absolute colors, you would use standard Tailwind color utilities (e.g., bg-blue-500) instead of DaisyUI semantic colors.

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