安装postcss插件

npm install -D postcss-class-rename

• postcss-class-rename 是将小程序不支持的css类重命名

tailwindcss配置移除不支持的css样式

module.exports = {
  // Tree-shake unused styles in production build
  // purge: ['./src/**/*.{vue,js,ts,jsx,tsx,html}'],
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
    // Disable breakpoints
    screen: {}
  },
  variants: {
    extend: {},
  },
  plugins: [],
  corePlugins: {
    space: false,
    divideWidth: false,
    divideColor: false,
    divideStyle: false,
    divideOpacity: false,
  }
}

由于上面space/divideWidth等样式包含微信小程序不支持的写法：.className > :not([hidden]) ~ :not([hidden])，所以移除。

uniapp 配置postcss.config.js如下:

const path = require('path')
module.exports = {
  parser: require('postcss-comment'),
  plugins: [
    require('postcss-import')({
      resolve(id, basedir, importOptions) {
        if (id.startsWith('~@/')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
        } else if (id.startsWith('@/')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
        } else if (id.startsWith('/') && !id.startsWith('//')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
        }
        return id
      }
    }),

    /* ******* 引入tailwindcss ******* */
    require('tailwindcss')({}),
    //
    // // 根据平台差异进行不同的样式处理
    ...(
      process.env.UNI_PLATFORM !== "h5"
        ? [
          // 使用postcss-class-name 包将小程序不支持的类名写法转换为支持的类名，如："hover:xxx"
          require("postcss-class-rename")({
            "\\\\:": "--",
            // "\\\\/": "--",
            "\\\\.": "--",
            ".:": "--"
          })
        ]
        : [
          require("autoprefixer")({
            remove: true,
          }),
        ]
    ),

    /* ******* ******* */
    require('@dcloudio/vue-cli-plugin-uni/packages/postcss'),

    ...(process.env.NODE_ENV === "production" ? ['purgecss'] : []),

  ]
}

/* ******* ******* */之间是关键配置