daisyui按钮不响应hover/focus因tailwind 3.4+默认未启用对应变体，需在plugins中确认daisyui已正确加载；dark:失效因主题机制不匹配，data-theme与darkmode:’class’不可混用；字体替换应扩展而非覆盖font-sans；自定义primary色须用6/8位hex且需指定data-theme生效。
为什么 daisyUI 的按钮在 Tailwind 3.4+ 里不响应 hover/focus 状态
因为 daisyUI 默认依赖 Tailwind 的 hover:、focus: 等变体（variants），而新版本 Tailwind 默认只启用部分变体；若未显式开启，btn-primary hover:bg-primary-focus 这类样式根本不会生成。
- 检查
tailwind.config.js中的variants（v2）或plugins（v3+）配置：v3.3+ 已移除variants，改用plugins控制，需确认是否启用了require('daisyui')且其内部插件已加载 - 常见错误是手动写了
hover:bg-blue-600却发现没生效——不是 css 写错，是 Tailwind 根本没编译出对应类名 -
daisyUIv4+ 要求 Tailwind v3.3+，若混用 v2 配置（如旧版variants: ['hover', 'focus']），会导致插件冲突或静默失效
dark: 前缀在 daisyUI 主题切换中为何有时不生效
daisyUI 的暗色模式不是靠媒体查询自动触发，而是靠给根元素加 data-theme="dark" 或 class="dark" 手动控制；dark: 变体能否工作，取决于你用的是哪套主题机制。
- 用
data-theme（推荐）：确保 HTML 根标签有，且daisyUI的 CSS 是通过@import "daisyui/dist/full.css"引入（而非仅 base） - 用
class="dark"：必须启用 Tailwind 的darkMode: 'class'，并在tailwind.config.js中声明，否则dark:bg-base-200类不会生成 - 如果用了
data-theme却还写dark:，两者不联动——daisyUI自己的主题系统会覆盖 Tailwind 的dark:规则
如何安全替换 daisyUI 默认字体而不破坏组件排版
直接改 font-sans 全局定义容易导致 select、textarea、badge 等组件行高/内边距错乱，因为 daisyUI 的尺寸体系（如 btn-sm 的 px-3 py-1）是按默认字体度量微调过的。
- 优先用
theme.extend.fontFamily.sans在tailwind.config.js中扩展，而不是覆盖font-sans - 若必须替换，默认字体栈应保留
system-ui和sans-serif回退，例如：['Inter', 'system-ui', '-apple-system', 'sans-serif'] - 特别注意
input和textarea：它们默认继承font-sans，但某些浏览器对非等宽字体渲染光标位置不准，建议显式加font-mono到代码类输入框
自定义主题时 primary 色值被忽略的三个常见原因
daisyUI 主题色不是简单变量替换，它会生成一整套衍生色（primary-focus、primary-content 等），若原始色值不符合可计算条件，整个主题会 fallback 到默认色。
立即学习“前端免费学习笔记（深入）”；
- 传入十六进制色值必须是 6 位或 8 位（如
#3b82f6），#38f这种缩写会被跳过 - 不能用 HSL/RGB 函数（如
hsl(210, 70%, 50%)），daisyUI解析器只认十六进制或命名色（blue-500） - 若在
tailwind.config.js的daisyui.themes中定义了多个主题，但未在 HTML 中通过data-theme指定，浏览器只会加载第一个主题，其余被忽略
主题色计算依赖亮度对比逻辑，所以哪怕配对成功，primary-content 文字颜色也可能和预期不同——这不是 bug，是它在自动适配可访问性对比度。真要完全控制，得用 extend 手动覆盖每个衍生类，而不是只设 primary。