tailwindcss 支持微信小程序配置

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了tailwindcss 支持微信小程序配置，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1658字，纯文字阅读大概需要3分钟。

内容图文

安装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'] : []),

  ]
}

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

内容总结

以上是互联网集市为您收集整理的tailwindcss 支持微信小程序配置全部内容，希望文章能够帮你解决tailwindcss 支持微信小程序配置所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端