postcss.config.js

export default {
  plugins: {
    '@tailwindcss/postcss': {},
    // 解决tailwindcss默认的是rem，rem不会转换为vmin的问题
    'postcss-rem-to-pixel': {
      rootValue: 16, // 根元素字体大小（默认 16px）
      propList: ['*'], // 转换所有属性的 rem 单位
    },
    // 使用 cnjm-postcss-px-to-viewport 规避 postcss.plugin was deprecated 警告
    'cnjm-postcss-px-to-viewport': {
      viewportWidth: 375, // 根据设计稿设定
      unitPrecision: 2, // 转化精度，转换后保留位数
      viewportUnit: 'vmin', // 转换后的单位
      fontViewportUnit: 'vmin', // 字体单位
      unitToConvert: 'px', // 需要转换的单位
      // tailwindcss v4 将所有 CSS 包裹在 @layer 中，需开启此选项才能处理 @layer 内的规则
      mediaQuery: true,
    },
  },
}