html css 微信小程序,tailwindcss 支持微信小程序配置

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

]

}

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

标签：false,process,微信,require,程序,tailwindcss,path,postcss,id

来源： https://www.cnblogs.com/li1234yun/p/14257579.html