CSS 单位转化

最常见的情况是 rem 转 rpx，直接在 WeappTailwindcss 的 cssOptions 里开启 rem2rpx：

WeappTailwindcss({
  cssOptions: {
    rem2rpx: true,
  },
})

true 表示 1rem = 32rpx。这页只讲另外两种情况：px 转 rpx，以及多单位转 px。

px 转 rpx

从 [email protected] 开始，插件内置了 postcss-pxtransform。需要 px 转 rpx 时，在 cssOptions 中开启 px2rpx：

// vite
import { WeappTailwindcss } from 'weapp-tailwindcss/vite'

WeappTailwindcss({
  cssOptions: {
    px2rpx: true,
  },
})

// webpack
const { WeappTailwindcss } = require('weapp-tailwindcss/webpack')

new WeappTailwindcss({
  cssOptions: {
    px2rpx: true,
  },
})

true 会按 1:1 转换，比如 10px 输出成 10rpx。

如果你的设计稿是 375 宽，希望 10px 输出为 20rpx，传对象：

WeappTailwindcss({
  cssOptions: {
    px2rpx: {
      designWidth: 375,
      deviceRatio: {
        375: 2,
      },
    },
  },
})

更多参数看 postcss-pxtransform。不要为了单位转换再把 Tailwind CSS 官方 PostCSS 插件注册进来，小程序样式生成仍然由 weapp-tailwindcss 接管。

多单位转 px

uni-app x 等场景更适合输出 px。这时可以启用 cssOptions.unitsToPx，把 rem、em、vw、vh、vmin、vmax、rpx 等单位转成 px。

// vite
import { WeappTailwindcss } from 'weapp-tailwindcss/vite'

WeappTailwindcss({
  cssOptions: {
    unitsToPx: true,
  },
})

默认换算里：

• 1rem 输出为 16px
• 2rpx 输出为 1px

需要自定义时传对象：

const { WeappTailwindcss } = require('weapp-tailwindcss/webpack')

new WeappTailwindcss({
  cssOptions: {
    unitsToPx: {
      unitPrecision: 2,
      unitMap: {
        rem: 16,
        rpx: 0.5,
        vw: 3.75,
      },
    },
  },
})

如果最终想输出 px，不要同时开启 cssOptions.px2rpx 或 cssOptions.rem2rpx。cssOptions.unitsToPx 会先转成 px，后续还会继续被转成 rpx。