小程序css插件,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')

]

}

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