小白程序员必看！手把手教你攻克AI大模型面试
2026/9/11 19:10:05
daisyUI 如何用 contenteditable="false">【免费下载链接】daisyui🌼 🌼 🌼 🌼 🌼 The most popular, free and open-source Tailwind CSS component library![]()
项目地址: https://gitcode.com/GitHub_Trending/da/daisyui
如果你的页面整体是某个主题，但希望其中一块区域（一张卡片、一个弹窗、一个局部容器）使用完全不同的配色，daisyUI 的做法是在任意元素上添加data-theme="THEME_NAME"：该元素内部的所有内容都会切换到指定主题，并且可以无限层嵌套。这套机制只依赖 CSS，不要求写 JS。前提是你已经按 安装文档/docs/install/+page.md) 把 daisyUI 作为 Tailwind CSS 插件接入项目。
先启用你要在局部使用的主题
daisyUI 通过 CSS 文件里的@plugin "daisyui" {}管理主题。默认配置只启用了两个主题：
/* app.css */ @import "tailwindcss"; @plugin "daisyui" { themes: light --default, dark --prefersdark; }也就是说，默认情况下你只能在局部区域使用light和dark。要让cupcake、retro这类内置主题可用于data-theme，必须把它们加进themes列表（来源：themes 文档/docs/themes/+page.md)）：
@import "tailwindcss"; @plugin "daisyui" { themes: light --default, dark --prefersdark, cupcake, retro; }其中--default标记默认主题，--prefersdark标记系统深色模式下的默认主题；themes: all可启用全部内置主题。themes配置项的完整说明见 config 文档/docs/config/+page.md)。
在元素上嵌套><html>@import "tailwindcss"; @plugin "daisyui"; @plugin "daisyui/theme" { name: "mytheme"; default: true; /* set as default */ prefersdark: false; color-scheme: light; --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-* 变量同文档示例 */ }<div><input type="checkbox" value="synthwave" class="toggle theme-controller" />
<div><input type="checkbox" value="synthwave" class="toggle theme-controller" />该组件纯靠 CSS 切换主题，文档建议如需刷新后保持选择，再自行用 JS 把状态存入 localStorage。浏览器支持要求为 Chrome 105、Firefox 121、Safari 15.4（该文档 frontmatter 声明）。要注意它改变的是整页主题，与本文的局部data-theme机制独立；两者可以共存，但局部data-theme写死的区域不受整页切换影响。
【免费下载链接】daisyui🌼 🌼 🌼 🌼 🌼 The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考