Mpx 是滴滴出行下，一款具有优秀开发体验和深度性能优化的增强型跨端小程序框架。
本文以 mpxjs 2.8.16 版本为主，这个版本把原先一些裸露在外的 cli 配置文件，给融入到了各个 npm 包中 其中 webpack 的主版本为 5, postcss 版本为 8，这意味着你可以使用最新版本的 tailwindcss
!!!重要，请把 @mpxjs/webpack-plugin 升级到大于等于 2.8.16 版本。
不然开发时，热更新会有问题，详见:
如果你是老的 mpx 项目，要进行迁移，可以查看官网迁移指南
# 全局安装 cli
yarn global add @mpxjs/cli
# cli 创建项目
mpx create mpx-project
# 切换到新的 mpx-project 中
cd mpx-project
# 安装包
yarn这里的相关初始化文档详见官网
执行:
yarn add -D tailwindcss weapp-tailwindcss-webpack-plugin postcss-rem-to-responsive-pixel由于 postcss 8 和 autoprefixer 已经内置，我们无需额外安装，其中:
-
weapp-tailwindcss-webpack-plugin是一个给tailwindcss设计的小程序适配插件 -
postcss-rem-to-responsive-pixel则是用来把rem转化成px或者rpx的工具，由于tailwindcss长度默认都是rem所以我们需要它把rem转化成rpx。
在根目录下，创建一个 tailwind.config.js 文件，写入内容:
/** @type {import('tailwindcss').Config} */
module.exports = {
// content 是用来指定让 tailwindcss 从哪些文件中提取字符串，来生成对应的工具类
content: ['./src/**/*.{html,js,ts,mpx}'],
theme: {
extend: {}
},
plugins: [],
// 去除 preflight ，因为 preflight.css 主要用来 reset h5 的样式的
// 如果你有多端需求，可以通过环境变量来控制这个值
corePlugins: {
preflight: false
}
}接着在原先的 postcss.config.js 基础上，加上 tailwindcss 和 postcss-rem-to-responsive-pixel
module.exports = {
plugins: [
require('tailwindcss')(),
require('autoprefixer')({ remove: false }),
require('postcss-rem-to-responsive-pixel')({
// 下面这段配置项的意思是，1rem转化为32rpx，* 的意思是所有的 rem 会被转化
rootValue: 32,
propList: ['*'],
transformUnit: 'rpx'
})
]
}在 vue.config.js 注册插件：
const { defineConfig } = require('@vue/cli-service')
const { MpxWeappTailwindcssWebpackPluginV5 } = require('weapp-tailwindcss-webpack-plugin')
module.exports = defineConfig({
pluginOptions: {
mpx: {
srcMode: 'wx',
plugin: {},
loader: {}
}
},
configureWebpack(config) {
config.plugins.push(new MpxWeappTailwindcssWebpackPluginV5())
}
})最后在 app.mpx 中引入 tailwindcss
<style>
@tailwind base;
@tailwind utilities;
/* 如果你使用 scss，你可以在 style标签上加上 lang="scss" 然后使用@import */
@import 'tailwindcss/base';
@import 'tailwindcss/utilities';
</style>就大功告成了
由于 tailwindcss 默认是生成在全局的 app.wxss 里的，所以你的组件要想使用样式的话，不要忘记加上
Component({
options: {
addGlobalClass: true,
}
})