Tailwind CSS & DaisyUI Theming: The Complete Guide

TailwindCSS theming fundamentals

TailwindCSS is a utility-first CSS framework that generates classes from a configuration. You customize your theme in tailwind.config.js (or tailwind.config.ts for TypeScript) by extending the default theme:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#7c3aed',
          50: '#f5f3ff',
          // ...
          900: '#2e1065'
        }
      }
    }
  }
}

This approach requires you to define every shade. For design system work, you'll often want CSS custom properties instead — they can be themed dynamically at runtime.

CSS custom properties + Tailwind

Modern Tailwind (v4+) uses CSS custom properties natively. You can map Tailwind's color scale to runtime variables:

/* globals.css */
@layer base {
  :root {
    --color-primary: oklch(0.53 0.28 291);
    --color-primary-50: oklch(0.97 0.03 291);
  }
}

/* tailwind.config.js */
theme: {
  colors: {
    primary: 'oklch(var(--color-primary) / )'
  }
}

DaisyUI theming

DaisyUI is a component library that layers semantic CSS tokens on top of Tailwind. It defines colors as semantic roles — primary, secondary, accent, base-100, etc. — which components reference.

DaisyUI v4 uses CSS custom properties natively and supports OKLCH out of the box. A minimal custom theme looks like:

/* globals.css */
@plugin "daisyui" {
  themes: [{
    mytheme: {
      "--color-primary": "oklch(0.53 0.28 291)",
      "--color-primary-content": "oklch(0.96 0.02 291)",
      "--color-secondary": "oklch(0.60 0.22 195)",
      "--color-secondary-content": "oklch(0.97 0.01 195)",
      "--color-base-100": "oklch(0.97 0.005 240)",
      "--color-base-content": "oklch(0.15 0.01 240)",
      "--radius-box": "1rem",
      "--radius-field": "0.5rem"
    }
  }]
}

The DaisyUI token system

DaisyUI defines these primary color tokens (each has a corresponding -content foreground):

• primary — main brand color (buttons, links, focus rings)
• secondary — secondary brand color
• accent — pop/highlight color
• neutral — muted, in-between (sidebars, footer)
• base-100/200/300 — page background scale
• info / success / warning / error — semantic status colors

Using LiveTheme to design and export DaisyUI themes

Rather than hand-crafting these values in a text editor, LiveTheme's theme editor gives you:

1. A visual color picker for every DaisyUI token
2. Live preview on real DaisyUI components (the DaisyUI Kit template)
3. WCAG contrast checking for every color pair
4. One-click export of ready-to-paste DaisyUI v4 config

Tailwind v4 CSS-first configuration

TailwindCSS v4 moves most configuration into CSS itself using @theme:

@import "tailwindcss";

@theme {
  --color-primary: oklch(0.53 0.28 291);
  --color-secondary: oklch(0.60 0.22 195);
  --radius-lg: 1rem;
  --font-heading: "Inter", sans-serif;
}

LiveTheme exports code in this format for Tailwind v4 projects. Select the "TailwindCSS" export option when your project uses v4.

Multi-theme support

DaisyUI supports multiple themes simultaneously via data-theme on the root element. You can ship light and dark variants:

@plugin "daisyui" {
  themes: [{
    light: { ... },
    dark: { ... }
  }]
}

Enable automatic switching based on OS preference with a media query or JavaScript.