微信小程序使用tailwindcss

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

npx tailwindcss init

// tailwind.config.js
module.exports = {
　　content: ["./miniprogram/**/*.{wxml,js}"],
　　theme: {
　　　　extend: {},
　　},
　　plugins: [],
　　corePlugins: {
　　　　preflight: false
　　}
}

/* 前两项用不到，注释掉*/
/*
@tailwind base;
@tailwind components;
*/
@tailwind utilities;

npx tailwindcss --no-autoprefixer -i ./tailwind.css -o ./miniprogram/tailwind.wxss --watch

/* app.wxss */
@import './tailwind.wxss'

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

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

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    'postcss-rem-to-responsive-pixel': {
      // 转化的单位,可以变成 px / rpx
      transformUnit: 'rpx',
      // 32 意味着 1rem = 32rpx
      rootValue: 32,
      // 默认所有属性都转化
      propList: ['*']
    },
  },
};

npm i -D tailwindcss-rem2px-preset

// tailwind.config.js

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