微信小程序+Tailwind的配置

在开发微信小程序 时，大概率会使用单位rpx，那么此时如果还使用了Tailwind，那必然要解决默认IDE的Tailwind语法提示里的单位显示（默认为rem，需要改为rpx）

rpx和rem的区别

rpx是什么

不管手机的屏幕宽度是多少，微信小程序都负责把这个宽度平均分成 750 份，而把这分好过的 750 份中的 1 份取名叫 1rpx。

rem是什么

rem是相对于根元素的 font-size 值，页面中的根元素只有一个（即 html 标签），标准统一，比如 html {font-size: 16px} ，1rem相当于16px。

两种转化方式(二者选其一即可)

想要把项目里所有的 rem 都转化成 rpx

那么 postcss plugin: postcss-rem-to-responsive-pixel 适合你

npm i -D postcss-rem-to-responsive-pixel

安装好之后，把它注册进你的 postcss.config.js 即可

module.exports = {
  plugins: {
		tailwindcss: {},
		'postcss-rem-to-responsive-pixel': {
      // 32 意味着 1rem = 32rpx
      rootValue: 32,
      // 默认所有属性都转化
      propList: ['*'],
      // 转化的单位,可以变成 px / rpx
      transformUnit: 'rpx'
      // postcss-rem-to-responsive-pixel@6 版本添加了 disabled 参数，用来禁止插件的转化
      // disabled: process.env.TARO_ENV === 'h5' || process.env.TARO_ENV === 'rn'
    }
  }
}

只把项目里 tailwindcss 生成的工具类的单位，从 rem 转变为 rpx

npm i -D tailwindcss-rem2px-preset

tailwind.config.js如下

module.exports = {
  presets: [
    require('tailwindcss-rem2px-preset').createPreset({
      // 意味着 1rem = 32rpx
      fontSize: 32,
      // 转化的单位  px / rpx
      unit: 'rpx'
    })
  ],
}

由于我的项目中几乎都使用的Tailwind，自定义css极少，使用第二个方案。
注意！对于正在开发中的项目仍需专门搜索rem、px、em等非rpx单位进行针对性修改