tailwindcss 支持微信小程序配置

时间：2024-02-22 15:28:16

安装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\')
  ]
}

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

相关文章