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

> Master DaisyUI colors in CSS with semantic variables and utility classes. Leverage `bg-primary` and `text-base-content` for adaptable theming. Learn now!

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

---

**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/main/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`](https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/utilities/+page.md) (line 19), you can apply colors using standard Tailwind syntax:

```html
<!-- 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`](https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/colors/+page.md) (lines 76-82), this syntax works with any color utility:

```html
<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:

```css
/* 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);
}

```

```html
<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:

```html
<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://github.com/saadeghi/daisyui/blob/main/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.

```html
<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`](https://github.com/saadeghi/daisyui/blob/main/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.