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",}),],
};
這里特別注意?
