1. 前言
接手了一个uniapp的微信小程序项目，因为在上一个 taro 的项目中使用的 tailwindcss，感觉比较方便，又不想动项目中原来的代码，因此就配置 tailwindcss，在新创建的子包中使用。
2. 分析
vue2 版本的 uni-app 内置的 webpack 版本为 4 , postcss 版本为 7, 所以还是只能使用 @tailwindcss/postcss7-compat 版本。
3. package.json
新建一个vue2 uni-app项目，然后我们 npm init -y 在项目根目录创建一个 package.json，并安装依赖。
3.1 添加依赖
"autoprefixer": "9","postcss": "7","postcss-rem-to-responsive-pixel": "^5.1.3","tailwindcss": "npm:@tailwindcss/postcss7-compat","weapp-tailwindcss-webpack-plugin": "^1.6.8","webpack": "npm:webpack@webpack-4"
3.2 原项目配置结果
4. vue.config.js
在 vue.config.js 文件，注册 weapp-tailwindcss-webpack-plugin。
4.1 注册
// 为了 tailwindcss jit 开发时的热更新
if (process.env.NODE_ENV === "development") {process.env.TAILWIND_MODE = "watch";
}const {UniAppWeappTailwindcssWebpackPluginV4,
} = require("weapp-tailwindcss-webpack-plugin");/*** @type {import('@vue/cli-service').ProjectOptions}*/
const config = {//....configureWebpack: {plugins: [new UniAppWeappTailwindcssWebpackPluginV4()],},//....
};module.exports = config;4.2 注册结果
5. tailwind.config.js
5.1 配置 tailwind.config.js
const path = require("path");
const resolve = (p) => {return path.resolve(__dirname, p);
};/** @type {import('@types/tailwindcss/tailwind-config').TailwindConfig} */
module.exports = {mode: "jit",purge: {content: [resolve("./index.html"),resolve("./pages/**/*.{vue,js,ts,jsx,tsx,wxml}"),],},darkMode: false, // or 'media' or 'class'theme: {extend: {},},variants: {},plugins: [],corePlugins: {preflight: false,},
};
content 也必须为绝对路径。
5.2 配置结果
6. postcss.config.js
6.1 配置 postcss.config.js
const path = require("path");module.exports = {plugins: [require("autoprefixer")({remove: process.env.UNI_PLATFORM !== "h5",}),require("tailwindcss")({config: path.resolve(__dirname, "./tailwind.config.js"),}),// rem 转 rpxrequire("postcss-rem-to-responsive-pixel/postcss7")({rootValue: 32,propList: ["*"],transformUnit: "rpx",}),],
};
这里特别注意ÿ
