tailwind css v4 主动放弃对旧浏览器（如 chrome 109、ios safari ≤13.3、android webview ≤11）的支持，因使用 @layer、oklch 颜色、@property 等原生不兼容特性，导致样式静默失效；唯一稳定方案是降级至 tailwindcss@3 + daisyui@4。
Tailwind CSS v4 升级后在旧浏览器（如 Chrome 109、iOS Safari ≤13.3、Android WebView ≤11）中样式大面积失效，不是配置漏了或构建错了，而是 v4 **主动放弃支持** 这些环境——OKLCH 颜色、@layer、@property、color-mix()、CSS nesting 等特性被直接忽略，整段 CSS 规则静默丢弃。
为什么 @layer base 和 preflight 在旧浏览器里完全不生效
v4 默认用 @layer base 包裹 reset 样式（即 preflight），但 IE11、iOS Safari ≤13.3、Android WebView ≤11 根本不识别 @layer 语法，整块规则被跳过；Chrome 109 虽能解析 @layer，却无法处理 oklch(50% 0.2 270) 或 @property --tw-color，导致 color 插件生成的变量链断裂，后续所有 text-blue-500 类全部失效。
-
@layer base→ 旧浏览器报“unknown at-rule”，整段 CSS 被丢弃 -
theme.colors.blue.500编译为color: oklch(50% 0.2 270)→ 旧浏览器解析失败，整条声明被忽略 -
@apply中含color-mix()或 nesting → 构建输出空规则，或直接报错
别试 postcss-preset-env 或 toColorSpace 降级方案
这些工具只能补前缀、转颜色空间，解决不了 @layer 不识别、@property 不存在、color-mix() 无实现等底层缺失。v4 的构建产物从语法层就不被旧解析器接受，任何 post-process 都是徒劳。
-
postcss-preset-env对@layer和@property完全无能为力 -
toColorSpace: 'srgb'只影响输出颜色格式，但oklch()仍会出现在生成代码中（v4 强制启用） - 手动覆盖
theme.colors为rgb()值 → 会被 v4 内部 color 插件重写，无效
唯一稳态解：降级到 tailwindcss@3 + daisyui@4
v3 使用纯 CSS2.1 + Flex/Grid 基础语法，颜色默认输出 rgb()/hsl()，@layer 未引入，preflight 直接写入全局规则，经 Chrome 109、iOS Safari 11.3、Android 4.4 WebView 大量验证。
- 执行：
npm uninstall tailwindcss daisyui && npm install -D tailwindcss@3 daisyui@4 -
tailwind.config.js中删掉 v4 特有字段：content.types、theme.extend.container.center - v4 的
aspect-ratio类 → 改用relative pt-[56.25%]模拟 - v4 的
scrollbar-hide→ 改用[&::-webkit-scrollbar]:hidden
双构建仅适合必须同时服务新老用户的场景
若你真要兼容 Chrome 109（如银行内网）和现代用户，可分发两套 CSS，但注意：CSS.supports('color', 'oklch(0% 0 0)') 是目前最可靠的运行时检测方式，User-Agent 判断不可靠；JS 动态加载需确保 fallback 资源已预加载，否则首屏白屏风险高。
- 打包产物命名需明确区分：
app-modern.css（v4） vsapp-legacy.css（v3） - 不要依赖
matchMedia或navigator.userAgent做判断，它们易被伪造或滞后 - Vite/Next.js 等框架可能静默覆盖你的
postcss.config.js，建议在autoprefixer中硬编码overrideBrowserslist
真正容易被忽略的是：v4 的兼容性断层是设计决策，不是 bug；你在调试控制台看到“无效属性”或“空白样式面板”，不是你写错了类名，而是浏览器压根没尝试解析那行 CSS —— 这个认知偏差，会让很多人在错误方向上花掉数天时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
