tailwindcss常见操作

# 将 OKLCH/OKLAB 颜色转换为浏览器兼容的格式（如 RGB）

安装依赖

首先安装 PostCSS 插件和相关工具：

npm install @csstools/postcss-oklab-function postcss postcss-loader --save-dev

配置 PostCSS

在项目根目录创建或修改 postcss.config.js 文件：

// postcss.config.js
module.exports = {
  plugins: {
    // 将 OKLCH/OKLAB 转换为 RGB
    "@csstools/postcss-oklab-function": {
      preserve: false, // 转换后移除原始的 OKLCH/OKLAB 语法
    },
    // 其他 PostCSS 插件（如果需要）
    autoprefixer: {},
  },
};

1
2
3
4
5
6
7
8
9
10
11

配置 Vite

确保 Vite 正确加载 PostCSS 配置。通常 Vite 会自动读取 postcss.config.js，但你也可以在 vite.config.js 中显式配置：

// vite.config.js
import { defineConfig } from "vite";
import oklabFunction from "@csstools/postcss-oklab-function";
import autoprefixer from "autoprefixer";

export default defineConfig({
  css: {
    postcss: {
      plugins: [oklabFunction({ preserve: false }), autoprefixer],
    },
  },
  // 其他 Vite 配置...
});

1
2
3
4
5
6
7
8
9
10
11
12
13

#tailwindcss

← canvas的基本使用手机网页自适应→