Training Example: daisyUI – Review the Data, Give Your Score & Compare to the Real AI Evaluation

Nexus Dashboard v4.0 is now available! – Use code SPRING40 to get 40% discount on Nexus or Scalo npm i -D daisyui@latest
[H1] Faster, cleaner, easier Tailwind CSS development
daisyUI is the Tailwind CSS plugin you will love! It provides useful component class names to help you write less code and build faster. See components Components How to use?
[H2] don't re-invent the wheel every time
[IMG: yawing face emoji]
In a Tailwind CSS project, you need to write utility class names for every element. Thousands of class names just to style the most basic elements.
[H2] instead of writing 100 class names
For every element, every page, every project,again and again…
[H2] use semantic class names
[IMG: sunglasses emoji]
It's descriptive, faster, cleaner and easier to maintain. Features Links Message Faster development Cleaner HTML Customizable Themeable Pure CSS Pure CSS. No JS dependency Works on all frameworks
[H2] Design system
xs sm md lg xl xs sm md lg xl
[H2] Semantic colors
primary secondary accent neutral info success warning error // Styling a simple button
<button class="">
Tailwind Button
</button> // Result: Tailwind Button Used by engineers at Meta Research Alibaba Amazon Adobe Pepsico Google Cloud
[H2] Take Tailwind CSS to the next level
daisyUI adds class names to Tailwind CSSfor all common UI components.Class names like btn , card , toggle and many more. This allows us to focus on important thingsinstead of styling basic elements for every project. See All Components
[H2] No more ugly HTML
Write fewer class namesUse component class namesmodify them using Tailwind CSS utilities. Click Tailwind only Tailwind + daisyUI <div class="w-80 rounded-lg bg-zinc-50 text-zinc-800">
<div class="flex flex-col gap-3 p-8">
<input placeholder="Email" class="w-full rounded-sm border border-zinc-300 bg-white px-3 py-2 text-sm focus:ring-2 focus:ring-zinc-700 focus:ring-offset-2 focus:ring-offset-zinc-100 focus:outline-none focus-visible:border-zinc-900"/>
<label class="flex cursor-pointer items-center text-sm gap-1.5 text-zinc-500">
<div class="relative inline-block h-5">
<input type="checkbox" class="peer h-5 w-8 cursor-pointer appearance-none rounded-full border border-zinc-400 peer-checked:bg-white checked:border-zinc-900 focus-visible:ring-2 focus-visible:ring-zinc-400 checked:focus-visible:ring-zinc-900 focus-visible:ring-offset-2 focus-visible:outline-none"/>
<span class="pointer-events-none absolute start-0.75 top-0.75 block size-[0.875rem] rounded-full bg-zinc-400 transition-all duration-200 peer-checked:start-[0.9375rem] peer-checked:bg-zinc-900"></span>
</div>
Submit to newsletter
</label>
<label class="flex cursor-pointer items-center text-sm gap-1.5 text-zinc-500">
<div class="relative inline-block h-5">
<input type="checkbox" class="peer h-5 w-8 cursor-pointer appearance-none rounded-full border border-zinc-400 peer-checked:bg-white checked:border-zinc-900 focus-visible:ring-2 focus-visible:ring-zinc-400 checked:focus-visible:ring-zinc-900 focus-visible:ring-offset-2 focus-visible:outline-none"/>
<span class="pointer-events-none absolute start-0.75 top-0.75 block size-[0.875rem] rounded-full bg-zinc-400 transition-all duration-200 peer-checked:start-[0.9375rem] peer-checked:bg-zinc-900"></span>
</div>
Accept terms of use
</label>
<button class="inline-block cursor-pointer rounded-sm bg-zinc-900 px-4 py-2.5 text-center text-sm font-semibold text-white shadow-[0_.2rem_0.3rem_-.25rem_black] active:shadow-none transition duration-200 ease-in-out focus-visible:ring-2 focus-visible:ring-zinc-700 focus-visible:ring-offset-2 focus-visible:outline-none active:translate-y-[1px]" >Save</button>
</div>
</div> = Submit to newsletter Accept terms of use Save
[H2] Fewer class names Faster development Smaller file size
With daisyUI, you write 88% fewer class namesAnd your HTML size will be about 79% smaller. Get started
[H3] CSS Class names
Tailwind only 114 Tailwind + daisyUI 14 88% fewer class names
[H3] HTML size
Tailwind only 2110 byte Tailwind + daisyUI 427 byte 79% smaller DOM size
[H2] Highly customizable Powered by Tailwind CSS utility classes
daisyUI is built on top of Tailwind CSS so you can customize everything using utility classes. How to customize <a class="btn btn-primary">Button</a> ↓ <a class="btn btn-primary rounded-full">Button</a>
[H2] Pure CSS. Framework agnostic. Works everywhere.
daisyUI is a plugin for Tailwind CSS. It works on all JS frameworks and doesn't need a JS bundle file. Install daisyUI as a dev dependency and use the class names just like any other Tailwind CSS class name. How to use?
[IMG: daisyUI vue]
[IMG: daisyUI react]
[IMG: daisyUI svelte]
[IMG: daisyUI qwik]
[IMG: daisyUI laravel]
[IMG: daisyUI nextjs]
[IMG: daisyUI solidjs]
[IMG: daisyUI preact]
[IMG: daisyUI phoenix]
[IMG: daisyUI nuxtjs]
[IMG: daisyUI astro]
[IMG: daisyUI angular]
[IMG: daisyUI vite]
[IMG: daisyUI rails]
Admin panel Dashboard Notifications Messages People Products 50 Neutral Primary Secondary Accent Info Success Warning Error Unlimited themes with zero effort daisyUI adds a set of customizable color names to Tailwind CSS and these new colors use CSS variables for the values. Using daisyUI color names, you get Dark Mode and even more themes without adding a new class name. See all themes Semantic colors primary secondary accent neutral primary content secondary content accent content neutral content base 100 base 200 base 300 base content info success warning error info content success content warning content error content Learn more about colors Admin panel Dashboard Notifications Messages People Products 50 Neutral Primary Secondary Accent Info Success Warning Error Unlimited themes with zero effort daisyUI adds a set of customizable color names to Tailwind CSS and these new colors use CSS variables for the values. Using daisyUI color names, you get Dark Mode and even more themes without adding a new class name. See all themes Semantic colors primary secondary accent neutral primary content secondary content accent content neutral content base 100 base 200 base 300 base content info success warning error info content success content warning content error content Learn more about colors Admin panel Dashboard Notifications Messages People Products 50 Neutral Primary Secondary Accent Info Success Warning Error Unlimited themes with zero effort daisyUI adds a set of customizable color names to Tailwind CSS and these new colors use CSS variables for the values. Using daisyUI color names, you get Dark Mode and even more themes without adding a new class name. See all themes Semantic colors primary secondary accent neutral primary content secondary content accent content neutral content base 100 base 200 base 300 base content info success warning error info content success content warning content error content Learn more about colors Admin panel Dashboard Notifications Messages People Products 50 Neutral Primary Secondary Accent Info Success Warning Error Unlimited themes with zero effort daisyUI adds a set of customizable color names to Tailwind CSS and these new colors use CSS variables for the values. Using daisyUI color names, you get Dark Mode and even more themes without adding a new class name. See all themes Semantic colors primary secondary accent neutral primary content secondary content accent content neutral content base 100 base 200 base 300 base content info success warning error info content success content warning content error content Learn more about colors Admin panel Dashboard Notifications Messages People Products 50 Neutral Primary Secondary Accent Info Success Warning Error Unlimited themes with zero effort daisyUI adds a set of customizable color names to Tailwind CSS and these new colors use CSS variables for the values. Using daisyUI color names, you get Dark Mode and even more themes without adding a new class name. See all themes Semantic colors primary secondary accent neutral primary content secondary content accent content neutral content base 100 base 200 base 300 base content info success warning error info content success content warning content error content Learn more about colors Admin panel Dashboard Notifications Messages People Products 50 Neutral Primary Secondary Accent Info Success Warning Error Unlimited themes with zero effort daisyUI adds a set of customizable color names to Tailwind CSS and these new colors use CSS variables for the values. Using daisyUI color names, you get Dark Mode and even more themes without adding a new class name. See all themes Semantic colors primary secondary accent neutral primary content secondary content accent content neutral content base 100 base 200 base 300 base content info success warning error info content success content warning content error content Learn more about colors Admin panel Dashboard Notifications Messages People Products 50 Neutral Primary Secondary Accent Info Success Warning Error Unlimited themes with zero effort daisyUI adds a set of customizable color names to Tailwind CSS and these new colors use CSS variables for the values. Using daisyUI color names, you get Dark Mode and even more themes without adding a new class name. See all themes Semantic colors primary secondary accent neutral primary content secondary content accent content neutral content base 100 base 200 base 300 base content info success warning error info content success content warning content error content Learn more about colors Admin panel Dashboard Notifications Messages People Products 50 Neutral Primary Secondary Accent Info Success Warning Error Unlimited themes with zero effort daisyUI adds a set of customizable color names to Tailwind CSS and these new colors use CSS variables for the values. Using daisyUI color names, you get Dark Mode and even more themes without adding a new class name. See all themes Semantic colors primary secondary accent neutral primary content secondary content accent content neutral content base 100 base 200 base 300 base content info success warning error info content success content warning content error content Learn more about colors
[H2] Apply your own design decisions
Your website should be unique. Create a custom theme for yourself using daisyUI theme generator. The colors you pick will be applied to all daisyUI components. Theme Generator Learn more about themes
[H2] 65
Components 500+
utility classes endless possibilities endless possibilities
Mix and match daisyUI class names to create unique web pages. See All Components
[H2] daisyUI is the most popularcomponent library for Tailwind CSS
GitHub Stars open-source projects using daisyUI NPM Installs Featured in Fireship.io Syntax Podcast FreeCodeCamp Thinking Elixir Podcast Coding Cat Podcast We use daisyUI + Tailwind with our projects. It has been *extremely helpful* building websites fast and give us a red design line through several different projects. TiiaAurora Tech journalistI used daisyUI theme generator's Halloween theme and tweaked it to what I want and now, I'm so proud of what I've got! Ade Software EngineerdaisyUI is so good! I love how it sticks with the basic HTML components. Truly great. Nico Devs Software EngineerI found Tailwind CSS complicated, but daisyUI looks like something I can give a try. Bonnie Technical WriterCan't state how much I love daisyUI ♥️ rootkid Software DeveloperBeen using daisyUI for a while and I must say...such a fun addon for Tailwind CSS, well done ? Dev Ed Content CreatorI'm glad I found daisyUI. daisyUI is built with Tailwind CSS which makes it perfect fit for me. Rem Kim Founder of resolveai.coDaisyUI just looks amazing. Kelvin Htat Solo founderdaisyUI is probably the *best Tailwind Plugin I've ever used*, I've been using it since 2023 Shaun Furtado JS devdaisyUI is the missing part from Tailwind CSS which is the perfect choice for devs who need easy UI design Mahdi M Software developerWith daisyUI I haven't written a single line of css, yet my div classes are pretty clean Bogdan Chayka FounderI've been *enjoying daisyui* since I discovered it very recently, great job! Vincent Bergeron Software DeveloperThe new daisyUI 5.0 is awesome! The UI components are smooth and has a lot of new goodies. Ovi Stoica Software DeveloperIf you're a fan of Tailwind but hate writing 20+ class names to style a simple button or card, try daisyUI, it's really cool! AbdulAzeez Software DeveloperI love daisyUI, It's by far *my favorite CSS tool* and what finally got me into Tailwind. I'm shipping great looking UIs thanks to daisyUI. Alejandro Barrera Aponte Why did it take me so long to pair Tailwind with daisyUI… *Now I feel like a 10X developer*. Joel Pickin Software developerdaisyUI is such a *time saver* Ollie The Dev Amplify UI, texttodesign.aidaisyUI is good, *makes code much cleaner* for often used sets of classes without massive amount's of extra css bloat. Aaron Moy FounderI think daisyUI is very cool, it's *easy to use* and you can build a clean UI with it. ? ? Nihad Frontend Software Engineer*daisyUI is underrated.* The best mix of Bootstrap (semantic) + Tailwind (utility). Just pick your colors and go. Supports most common components. Now with Tailwind v4. Theme builder. Quick adjustment with Tailwind. *CSS only and no JS. Zero dependencies.* DHH's "No build" friendly. Kenn Ejima Co-Founder & CTOdaisyUI is awesome! Daniel Kelly Teacher/Content Creator at vueschool.ioIf you want to create a quick MVP for your next project, I recommend daisyUI. It offers a simple and elegant design.✨ Jairon Landa Software developerWe are using Go for the backend, daisyUI + Tailwind for styling, and HTMX for interactivity. Jack Spirou FounderIf you want to *build beautiful apps in no time* daisyUI is the way to go ✨ I've been using it for the past 6 months and can't imagine living without it... Marc Lou SolopreneurWhile I love the flexibility of Tailwind CSS, I always find myself configuring re-usable styles as I hammer out a visual concept. daisyUI made doing that a lot easier today. Chris Tankersley PHP Developer, Writer, Speaker, and TeacherHow much winning can one component library take?!? htmx.org high power tools for HTMLI *absolutely love daisyUI* and use it in all my projects. Cam Pak DeveloperdaisyUI makes working with UI components *so easy* Jason Indie Game Dev*I'm enjoying daisyUI* Alexander Thomsen Founder of moonbit.aiI Love daisyUI Guillaume Meyer EntrepreneurdaisyUI 5 + Tailwind CSS 4 is just an amazing combo for fast and high-end results Nacho Herrera DeveloperHonestly, I spent like 20% of my time writing code and 80% of time playing with Tailwind CSS and daisyUI. Really love the daisyUI themes ? Jiří Kratochvíl vuejs.berlin co-organizerI found daisyUI to be an amazing pair with htmx Ryan Dsouza DevOps enthusiast

Nexus Dashboard v4.0 is now available! – Use code SPRING40 to get 40% discount on Nexus or Scalo
[H1] daisyUI themes for Tailwind CSS
How to enable, customize, and manage daisyUI themes in Tailwind CSS. daisyUI comes with 35 built-in themes for Tailwind CSS. They instantly transform your website's look and save you from designing a color system from scratch. You can also create your own custom themes or customize built-in themes. You can manage themes by adding brackets in front of @plugin "daisyui" in your CSS file. app.css @import "tailwindcss";
- @plugin "daisyui";
+ @plugin "daisyui" {
+ themes: light --default, dark --prefersdark;
+ } themes is a comma-separated list of theme names you want to enable. You can set --default flag for a theme to make it the default theme. You can also set --prefersdark flag for a theme to make it the default theme for dark mode (prefers-color-scheme: dark).
[H2] Enable a built-in theme
By default, light and dark themes are enabled. Let's enable cupcake theme: app.css @import "tailwindcss";
@plugin "daisyui" {
themes: light --default, dark --prefersdark, cupcake;
} And set cupcake theme for the page: index.html <html data-theme="cupcake"></html> I suggest using theme-change, so you can switch themes and save selected theme in local storage.
[H2] List of themes
Try them: light A A A A dark A A A A cupcake A A A A bumblebee A A A A emerald A A A A corporate A A A A synthwave A A A A retro A A A A cyberpunk A A A A valentine A A A A halloween A A A A garden A A A A forest A A A A aqua A A A A lofi A A A A pastel A A A A fantasy A A A A wireframe A A A A black A A A A luxury A A A A dracula A A A A cmyk A A A A autumn A A A A business A A A A acid A A A A lemonade A A A A night A A A A coffee A A A A winter A A A A dim A A A A nord A A A A sunset A A A A caramellatte A A A A abyss A A A A silk A A A A
[H2] Enable all themes
Enable all 35 built-in themes by setting themes to all: app.css @import "tailwindcss";
@plugin "daisyui" {
themes: all;
}
[H2] Disable a theme
To disable dark theme for example, remove it from the list. Now only light theme is included: app.css @import "tailwindcss";
@plugin "daisyui" {
- themes: light --default, dark --prefersdark;
+ themes: light --default;
} If for some reason you want to disable all themes and remove all daisyUI colors, set themes to false: app.css @import "tailwindcss";
@plugin "daisyui" {
themes: false;
}
[H2] How to use a theme only for a section of a page?
Add data-theme='THEME_NAME' to any element and everything inside will have your theme. You can nest themes and there is no limit! You can force a section of your HTML to only use a specific theme. index.html <html data-theme="dark">
<div data-theme="light">
This div will always use light theme
<span data-theme="retro">This span will always use retro theme!</span>
</div>
</html>
[H2] How to add a new custom theme?
To add a new theme, use @plugin "daisyui/theme" {} in your CSS file, with the following structure: app.css @import "tailwindcss";
@plugin "daisyui";
@plugin "daisyui/theme" {
name: "mytheme";
default: true; /* set as default */
prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
color-scheme: light; /* color of browser-provided UI */
--color-base-100: oklch(98% 0.02 240);
--color-base-200: oklch(95% 0.03 240);
--color-base-300: oklch(92% 0.04 240);
--color-base-content: oklch(20% 0.05 240);
--color-primary: oklch(55% 0.3 240);
--color-primary-content: oklch(98% 0.01 240);
--color-secondary: oklch(70% 0.25 200);
--color-secondary-content: oklch(98% 0.01 200);
--color-accent: oklch(65% 0.25 160);
--color-accent-content: oklch(98% 0.01 160);
--color-neutral: oklch(50% 0.05 240);
--color-neutral-content: oklch(98% 0.01 240);
--color-info: oklch(70% 0.2 220);
--color-info-content: oklch(98% 0.01 220);
--color-success: oklch(65% 0.25 140);
--color-success-content: oklch(98% 0.01 140);
--color-warning: oklch(80% 0.25 80);
--color-warning-content: oklch(20% 0.05 80);
--color-error: oklch(65% 0.3 30);
--color-error-content: oklch(98% 0.01 30);
/* border radius */
--radius-selector: 1rem;
--radius-field: 0.25rem;
--radius-box: 0.5rem;
/* base sizes */
--size-selector: 0.25rem;
--size-field: 0.25rem;
/* border size */
--border: 1px;
/* effects */
--depth: 1;
--noise: 0;
} If you're using CDN and you want to use a custom theme, use it like this: app.css :root:has(input.theme-controller[value=mytheme]:checked),[data-theme="mytheme"] { /* mytheme is the name of the custom theme */
color-scheme: light;
--color-base-100: oklch(98% 0.02 240);
/* ...rest of CSS variables like above example */
}
[H2] How to customize an existing theme?
To customize a built-in theme, you can use the same structure as adding a new theme, but with the same name as the built-in theme. For example, to customize the light theme: app.css @import "tailwindcss";
@plugin "daisyui";
@plugin "daisyui/theme" {
name: "light";
default: true;
--color-primary: blue;
--color-secondary: teal;
} All the other values will be inherited from the original theme.
[H2] How to add custom styles for a specific theme?
You can write custom style for your elements only for a specific theme. In this example, .my-btn class only will have this style on light theme. app.css [data-theme="light"] {
.my-btn {
background-color: #1EA1F1;
border-color: #1EA1F1;
}
.my-btn:hover {
background-color: #1C96E1;
border-color: #1C96E1;
}
}
[H2] How to apply Tailwind's 'dark:' selector for specific themes
daisyUI can be configured to use Tailwind's dark: prefix For example if you want a padding only for a daisyUI dark theme you can use dark:p-10 In the example below, 'night' is darkmode theme so we add it to @variant dark app.css @import "tailwindcss";
@plugin "daisyui" {
themes: winter --default, night --prefersdark;
}
@custom-variant dark (&:where([data-theme=night], [data-theme=night] *)); index.html <div class="p-10 dark:p-20">
I will have 10 padding on winter theme and 20 padding on night theme
</div> Prev Colors Next Base style Do you have a question? Ask on GitHub or Discord server Do you see a bug? open an issue on GitHub Do you like daisyUI? Post about it! Support daisyUI's development: Open Collective Edit this page on GitHub Text version for AI prompts BLUEPRINT
[H2] Official daisyUI Code Generator MCP server
[H2] Generate daisyUI code with any LLM
More details Please upgrade your browser

Nexus Dashboard v4.0 is now available! – Use code SPRING40 to get 40% discount on Nexus or Scalo
[H1] Install daisyUI as a Tailwind plugin
How to install daisyUI as a Tailwind CSS plugin? You need Node.js and Tailwind CSS installed. 1. Install daisyUI as a Node package: NPM npm i -D daisyui@latest PNPM pnpm add -D daisyui@latest Yarn yarn add -D daisyui@latest Bun bun add -D daisyui@latest Deno deno i -D npm:daisyui@latest 2. Add daisyUI to app.css: @import "tailwindcss";
@plugin "daisyui";
[H2] Framework install tutorials
See example setup of daisyUI and Tailwind CSS on different frameworks and build tools. Vite Tailwind CSS CLI Tailwind CSS Standalone without Node Post CSS SvelteKit Astro React Laravel Rails Next.js Vue Nuxt Elixir Phoenix Django Electron Angular Solid Solid Start Qwik HTMX WordPress Bun dev server

Nexus Dashboard v4.0 is now available! – Use code SPRING40 to get 40% discount on Nexus or Scalo
[H1] daisyUI colors
How to use daisyUI semantic colors and theme-aware color variables in Tailwind CSS.
[H2] Introduction
daisyUI is fully themeable and colorable in Tailwind CSS, So instead of using constant color utility classes like: bg-green-500 bg-orange-600 bg-blue-700 etc. It's suggested to use semantic color utility classes like: bg-primary bg-secondary bg-accent etc. Each color name contains CSS variables and each daisyUI theme applies color values to the utility classes when it is applied.
[H2] Benefits
Semantic color names make more sense because when we design interfaces, we don't just use any random color. We define a specific color palette with names like primary, secondary, etc. and we only use those specific colors in our interfaces. Also, using semantic color names makes theming easier. You wouldn't have to define dark-mode colors for every single element and you wouldn't be limited to only light/dark themes. you can have multiple themes available and each theme is just a few lines of CSS variables. Example of theming a div with hardcoded color values Using hardcoded color names This is a hardcoded dark text on a light background,
it needs double the amount of class names to support dark mode. <div class="bg-zinc-100">
<div class="border-zinc-200 bg-zinc-50 text-zinc-800">
This is a hardcoded dark text on a light background, it needs double the amount of class names
to support dark mode.
</div>
</div> ? Fixed color names, hardcoded based on the value ? No automatic dark mode ?‍? You have to add dark-mode colors for every element ? high maintenance cost ? slow development ? hard to change a theme ⛓️‍? high chance of inconsistency ? You are limited to 2 themes only: light and dark Using semantic color names This is dark text on a light background,
which switches to light text on a dark background in dark mode. <div class="bg-base-200">
<div class="bg-base-100 border-base-300 text-base-content">
This is dark text on a light background, which switches to light text on a dark background in
dark mode.
</div>
</div> ? Semantic names, based on the purpose of the color ✨ Automatic dark mode ? No need to add any dark-mode class names ? Zero maintenance cost to add a theme ? Fast development ⚡️ Easy to change themes ? All colors are consistent based on the design system ♾️ Unlimited themes, easy to switch
[H2] List of all daisyUI color names
You can use these color names in your theme or in utility classes. Color nameCSS variableWhere to useprimary--color-primaryPrimary brand color, The main color of your brandprimary-content--color-primary-contentForeground content color to use on primary color secondary--color-secondarySecondary brand color, The optional, secondary color of your brandsecondary-content--color-secondary-contentForeground content color to use on secondary color accent--color-accentAccent brand color, The optional, accent color of your brandaccent-content--color-accent-contentForeground content color to use on accent color neutral--color-neutralNeutral dark color, For not-saturated parts of UIneutral-content--color-neutral-contentForeground content color to use on neutral color base-100--color-base-100Base surface color of page, used for blank backgroundsbase-200--color-base-200Base color, darker shade, to create elevationsbase-300--color-base-300Base color, even more darker shade, to create elevationsbase-content--color-base-contentForeground content color to use on base color info--color-infoInfo color, For informative/helpful messagesinfo-content--color-info-contentForeground content color to use on info colorsuccess--color-successSuccess color, For success/safe messagessuccess-content--color-success-contentForeground content color to use on success colorwarning--color-warningWarning color, For warning/caution messageswarning-content--color-warning-contentForeground content color to use on warning colorerror--color-errorError color, For error/danger/destructive messageserror-content--color-error-contentForeground content color to use on error color
[H2] How to use
Some daisyUI components come with modifier class names and that modifier class name will apply a color. For example: <button class="btn btn-primary">Button</button> Or: <input type="checkbox" class="checkbox checkbox-secondary" /> These components automatically set the correct background color, text color, border color, etc as needed so you don't need to set those colors manually. For example btn-primary sets primary color for background and border, and sets primary-content color for the text automatically as default. You can customize them using utility classes if you want to change the color. You can also use color names in utility classes just like Tailwind's original color names. These are utility classes that can be used with a color name: CSS Classbg-{COLOR_NAME}Also available on CDN /colors/properties.csstext-{COLOR_NAME}Also available on CDN /colors/properties.cssborder-{COLOR_NAME}Also available on CDN /colors/properties.cssfrom-{COLOR_NAME}Also available on CDN /colors/properties-extended.cssvia-{COLOR_NAME}Also available on CDN /colors/properties-extended.cssto-{COLOR_NAME}Also available on CDN /colors/properties-extended.cssring-{COLOR_NAME}Also available on CDN /colors/properties-extended.cssfill-{COLOR_NAME}Also available on CDN /colors/properties-extended.cssstroke-{COLOR_NAME}Also available on CDN /colors/properties-extended.cssshadow-{COLOR_NAME}Also available on CDN /colors/properties-extended.cssoutline-{COLOR_NAME}Also available on CDN /colors/properties-extended.cssdivide-{COLOR_NAME}accent-{COLOR_NAME}caret-{COLOR_NAME}decoration-{COLOR_NAME}placeholder-{COLOR_NAME}ring-offset-{COLOR_NAME} So you can use bg-primary, border-secondary, etc. Read more about daisyUI color utility classes.
[H3] Opacity values
You can also use opacity values with color names. <div class="bg-primary/50">Primary background with 50% opacity</div> If you're using daisyUI as a Tailwind CSS plugin, the number can be any value between 0 and 100. If you're using the daisyUI CDN file, only opacity values of 10, 20, 30, 40, 50, 60, 70, 80, 90 are available.
[H2] Color opacity and muted colors
base-content is the text color of the page by default. It's a dark color on light themes and it's a light color on dark themes. nord theme text-base-content dracula theme text-base-content Sometimes we need a muted text. something with less contrast. The best way to do this is using Tailwind CSS color opacity modifier by adding a /50 (or any other value) to the end of color name. Like text-base-content/50 nord theme text-base-content text-base-content/70 text-base-content/50 text-base-content/30 dracula theme text-base-content text-base-content/70 text-base-content/50 text-base-content/30 The advantage of using opacity is that it gives a constant result on all themes, for all colors.You can use it with any opacity value, you can use it for any color.For example primary-content: nord theme text-primary-content text-primary-content/50 dracula theme text-primary-content text-primary-content/50 Prev Config Next Themes Do you have a question? Ask on GitHub or Discord server Do you see a bug? open an issue on GitHub Do you like daisyUI? Post about it! Support daisyUI's development: Open Collective Edit this page on GitHub Text version for AI prompts BLUEPRINT
[H2] Official daisyUI Code Generator MCP server
[H2] Generate daisyUI code with any LLM
More details Please upgrade your browser