tailwindcss-v4 兼容性处理

tailwindcss v4 版本使用了 OKLCH 色彩空间，旧版的浏览器兼容性不是很好，如何解决这个问题呢？

我们可以下载两个插件来缓解这个问题：

@csstools/postcss-oklab-function：做 OKLCH 色彩空间转换
postcss-nesting：允许您将样式规则嵌套在一起

在 vite 中使用：

vite.config.tsts

import postcssOKLabFunction from '@csstools/postcss-oklab-function'
import postcssNesting from 'postcss-nesting'
import { defineConfig } from 'vite'

export default defineConfig({
    css: {
        postcss: {
            plugins: [
                postcssOKLabFunction(),
                postcssNesting(),
            ],
        },
    },
})

这样可以解决大部分因为色彩空间不兼容导致的颜色渲染不出来的问题。

tailwindcss-v4 兼容性处理

评论区