Tailwind CSS OKLCH 颜色与所有浏览器兼容

前端贾公子2026-04-15 18:04

介绍

从 Tailwind v4.0 开始，引入了许多重大变化，其中之一是使用 oklch 作为颜色格式。虽然这些颜色非常出色，并且与所有主流现代浏览器兼容，但有些浏览器仍在适配，而一些旧版浏览器目前还不支持。当我们部署 Web 应用时，必须确保它与大多数用户兼容。Tailwind 目前还没有适用于不支持 oklch 颜色模型的浏览器的备用颜色模式。为了解决这个问题，我们可以在 Next.js 应用中使用以下命令安装该库：` npm i @csstools/postcss-oklab-function`。

它的作用是什么？

有了这个库，我们可以把它当作 PostCSS 插件使用。当我们的应用部署到生产环境时，它会为 oklch 添加备用颜色，这些备用颜色会应用到尚不支持 oklch 模型的浏览器上。就像这样：

复制代码

.bg-primary {
    background-color: rgba(0,176,86);
    background-color: color(display-p3 .07462 .70961 .29084);
    background-color: oklch(66.28% .24 151.4);
}

如何使用？

它的用法非常简单。这里我将展示如何将其与 Next.js Web 应用程序一起使用。

步骤 1：安装

在你的 Next.js 应用中使用以下命令安装库：- npm i @csstools/postcss-oklab-function .

步骤 2：初始化

安装完成后，将其作为插件添加到您的 PostCSS 配置文件 (postcss.config.mjs) 中，如下所示：

复制代码

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    '@tailwindcss/postcss': {},
    '@csstools/postcss-oklab-function': { 'preserve': true },
  },
};

export default config;

复制代码

注意：不要忘记添加{ 'preserve': true }，否则它会将所有 oklch 替换为 rgb 和颜色模型。

步骤 3：测试

好了，现在我们可以通过运行这些命令（npm run build 然后 npm start）在生产环境中进行测试。您可以检查元素，应该可以看到其中的备用颜色。

复制代码