tailwindcss 支持微信小程序配置

安裝postcss插件

npm install -D postcss-class-rename css-byebye

• postcss-class-rename 是將小程序不支持的css類重命名
• css-byebye 移除不支持的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: {
    preflight: false,
    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 包將小程序不支持的類名轉換為支持的類名
          require("postcss-class-rename")({
            "\\\\:": "--",
            // "\\\\/": "--",
            "\\\\.": "--",
            ".:": "--"
          }),
          require("css-byebye")({
            rulesToRemove: [
              /\*/
            ],
            map: false
          })
        ]
        : [
          require("autoprefixer")({
            remove: true,
          }),
        ]
    ),
    /* ******* */

    require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
  ]
}

/* ******* ******* */之間是關鍵配置