案发现场
现象描述
最近在项目中使用了 Tailwind CSS v4 默认类名（如 .bg-gray-400），检查元素发现 CSS 属性 background-color: var(--color-gray-400) 已生效，但页面无颜色展示。
诡异点
控制台 Styles 面板中，该变量左侧没有出现颜色预览小方块。
- 正常情况（注意：颜色预览小方块显示）
- 非正常情况
逻辑推理
-
观察变量值。.text-white 和 .bg-gray-500引用的变量不同，既然这样，看下这俩变量有何不同？
猜想： 会不会是oklch()这个函数导致的问题？
-
验证猜想。将oklch函数定义的颜色值，更改为--color-white变量格式的颜色值，如:#f00。
此时发现，背景色生效了，颜色预览也正常了。
-
质疑语法规范。oklch() 函数兼容问题？浏览器不支持是否支持oklch() 函数？
问题原因
经过资料查询和排查发现，当前我用的是 Tailwind CSS v4（它默认全量使用 OKLCH）。而 oklch() 是 CSS Color Level 4 引入的新函数， Chrome 111 (2023年3月) 才是支持 OKLCH 的起点。我本地 Chrome 版本为 109，显然不支持 oklch函数。
参考文章：
解决方案
- （个人开发）升级 Chrome 浏览器版本；
- （生产环境）配置 Lightning CSS 或 PostCSS (postcss-preset-env) 进行色彩空间降级，将 oklch 自动转换为 rgb；
- （手动兼容）在 CSS 的 @theme 块中通过 Hex 手动覆盖核心变量；
更多思考
- 为什么要从 RGB/HSL 转向 OKLCH？OKLCH 有什么作用？
