Semantic colors

In Tailwind a color is named by its shade: bg-indigo-600, text-gray-500. daisyUI adds semantic colors — they are named by purpose: primary, secondary, background, error. The actual shade comes from the theme, so when the theme changes the whole interface is repainted without touching the markup.

Color names

Every color has a pair ending in -content — the text color on top of it. For example, primary-content reads well on a primary background, and base-content is the main text color on base-100.

Colors in utilities

Semantic colors work in Tailwind utilities just like regular ones: bg-primary, text-error, border-base-300.

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="rounded-box bg-primary p-4 text-primary-content">
  New course: JavaScript from scratch
</div>

Under the code there is a purple banner with light text. The rounded-box class is the corner radius from the daisyUI theme, the same one cards use.

Colors in components

Components take the same names through modifiers: btn-primary, badge-success, alert-error.

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="flex flex-wrap gap-2 p-4">
  <button class="btn btn-primary">Primary</button>
  <button class="btn btn-secondary">Secondary</button>
  <button class="btn btn-accent">Accent</button>
  <button class="btn btn-neutral">Neutral</button>
  <button class="btn btn-success">Success</button>
  <button class="btn btn-error">Error</button>
</div>

Six buttons in different colors. The text color on each is picked automatically from its -content pair.

Page background and text

Interface layers are built from the base shades: the page is base-100, a panel is base-200, borders are base-300.

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="bg-base-100 p-4 text-base-content">
  <div class="rounded-box border border-base-300 bg-base-200 p-4">
    <p class="font-semibold">Welcome, Anna!</p>
    <p class="text-base-content/60">Continue lesson 3 of "HTML basics".</p>
  </div>
</div>

A light grey panel with a thin border and two lines of text; the second is paler thanks to the /60 opacity. The CDN file contains bg-, text- and border- utilities with opacity in steps of 10; in an npm project semantic colors work in any utility, such as ring-primary or from-primary.

Common mistake

Painting the interface with fixed Tailwind colors:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="rounded-box bg-white p-4 text-gray-900">Course card</div>

In the light theme you see no difference, but in the dark theme this card stays a white spot. Use bg-base-100 and text-base-content for backgrounds and text, and keep shades like gray-900 for places that must not change with the theme.