tailwindcss v4 版本使用了 OKLCH 色彩空间,旧版的浏览器兼容性不是很好,如何解决这个问题呢?
我们可以下载两个插件来缓解这个问题:
@csstools/postcss-oklab-function
:做 OKLCH 色彩空间转换postcss-nesting
:允许您将样式规则嵌套在一起
在 vite 中使用:
import postcssOKLabFunction from '@csstools/postcss-oklab-function' import postcssNesting from 'postcss-nesting' import { defineConfig } from 'vite' export default defineConfig({ css: { postcss: { plugins: [ postcssOKLabFunction(), postcssNesting(), ], }, }, })
这样可以解决大部分因为色彩空间不兼容导致的颜色渲染不出来的问题。