Chrome 109（2023年初版本）在 Tailwind CSS v4 + daisyUI v5 组合下，出现大量 style 不生效是非常正常且预期行为，因为这两个工具在新版本都明确放弃了对 Chrome 109 及以下版本的支持。

目前主流情况（2026年视角）

推荐的几种处理方式（从推荐到不推荐）

方案1（最推荐）—— 降级到 v3 生态（最稳）

npm uninstall tailwindcss daisyui
npm install -D tailwindcss@3 daisyui@4

tailwind.config.js 保持类似原来写法（v3 语法）：

module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: { extend: {} },
  plugins: [require("daisyui")],
  daisyui: {
    themes: ["light", "dark", "cupcake", ...],
  },
}

绝大多数项目在 Chrome 109 上都能正常显示（颜色除外，v3 还是 rgb/hsl 为主）。

方案2 —— 双构建（现代浏览器用 v4，老浏览器用 v3）

这是目前少数还在支持 Windows 7 / 企业内网老 Chrome 项目会用的方案：

• 打包两条 CSS

  • app-modern.css → Tailwind v4 + daisyUI v5
  • app-legacy.css → Tailwind v3 + daisyUI v4

• 用 JS 动态加载（推荐）或后端判断 User-Agent

<!-- index.html -->
<script>
  const isModern = 
    CSS.supports('color', 'oklch(0% 0 0)') ||
    CSS.supports('@property', '--tw-test') ||
    matchMedia('(resolution: 2dppx)').matches;  // 粗略判断

  document.head.insertAdjacentHTML('beforeend',
    `<link rel="stylesheet" href="${isModern ? '/app-modern.css' : '/app-legacy.css'}">`
  );
</script>

缺点：构建复杂、维护成本高、CSS 体积翻倍。

方案3 —— 使用 Lightning CSS 后处理 Tailwind v4（实验性）

有人成功把 Tailwind v4 的输出用 lightningcss 针对 Chrome 62~109 做降级处理：

# 构建流程大致这样
npx tailwindcss -i ./src/input.css -o ./dist/tailwind.raw.css --minify=false

npx lightningcss \
  --target chrome109 \
  --minify \
  --bundle \
  ./dist/tailwind.raw.css -o ./dist/tailwind.css

能解决一部分问题（颜色、部分属性），但 @property 等核心特性无法 polyfill，仍然会崩很多组件（尤其是 daisyUI v5 的新写法）。

目前成功率 ≈ 60–80%，不稳定，不建议正式环境首选。

方案4 —— 给颜色加 fallback（只解决颜色问题）

如果只是颜色不显示，可以在 :root 加回 rgb 回退：

@layer base {
  :root {
    --primary: oklch(65% 0.2 240) /* modern */;
    --primary: rgb(59 130 246 / <alpha-value>) /* fallback */;
  }
}

但这治标不治本，很多其他新特性还是会失效。

总结建议（2026年3月）

你现在用的应该是 Tailwind v4 + daisyUI v5，对吧？
最快解决办法就是直接把两个都降到 v3/v4 组合，基本就能恢复正常。