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

科技前沿 • 2026-04-19 10:26 • 阅读 2

大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。

从 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）在生产环境中进行测试。您可以检查元素，应该可以看到其中的备用颜色。

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

它的作用是什么？

如何使用？

步骤 1：安装

步骤 2：初始化

步骤 3：测试

相关推荐