在 HBuilderX 中使用 tailwindcss
在 HBuilderX 中使用 tailwindcss
前言
之前我写了一个 weapp-tailwindcss-webpack-plugin 来兼容 uni-app,taro等等各个框架，不过那时候提供的 demo 都是 cli 版本的。最近社区里有同学问我， HBuilderX 要如何使用？
今天就给大家带来 HBuilderX 中 vue2 和 vue3 各自的 tailwindcss 的使用方法。
快速使用模板
如果你只想直接使用，而不在意 从 0 到 1 的搭建过程的话，你可以直接使用这 2 个模板。
uni-app-vue2-tailwind-hbuilder-template
uni-app-vue3-tailwind-hbuilder-template
下载下来后，先本地 npm i/yarn 安装一下依赖，然后就可以直接导入 HBuilderX 使用了。
从 0 到 1 的搭建过程
vue2 版本
vue2版本的uni-app内置的webpack版本为4,postcss版本为7, 所以还是只能使用@tailwindcss/postcss7-compat版本。
package.json
新建一个vue2 uni-app项目，然后我们 npm init -y 在项目根目录创建一个 package.json，并安装依赖：
{
"devDependencies": {
"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"
}
}
vue.config.js
然后添加 vue.config.js 文件，注册 weapp-tailwindcss-webpack-plugin:
// 为了 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;
postcss.config.js
然后再添加 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 转 rpx
require("postcss-rem-to-responsive-pixel/postcss7")({
rootValue: 32,
propList: ["*"],
transformUnit: "rpx",
}),
],
};
这里特别注意，在声明所有路径时，必须声明为绝对路径！！！
因为 hbuilderx 有这样一个读取配置的策略：如果目标目录是相对路径，就会读取 '\HBuilderX\plugins\uniapp-cli\' 目录下的文件，这直接导致配置找不到，导致项目无法启动。
tailwind.config.js
接着我们添加 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 也必须为绝对路径。
在 App.vue 中引入 tailwindcss
最后只需在 App.vue 引入即可:
<style lang="scss">
/*每个页面公共css */
@import "tailwindcss/base";
@import "tailwindcss/utilities";
</style>
现在，你就可以在 hbuilder 的vue2 项目中愉快的使用 tailwindcss 了！
vue3 版本
uni-app的vue3/vite版本，使用了rollup base的插件。 暂时不要升级到vite 3.x版本，目前uni-app并没有兼容这个版本，详见 Release Notes, 安装2.x版本的最新即可。(3.x会报process is not defined的错误)
package.json
我们 npm init -y 在项目根目录创建一个 package.json，并安装依赖：
{
"devDependencies": {
"autoprefixer": "^10.4.8",
"postcss": "^8.4.14",
"postcss-rem-to-responsive-pixel": "^5.1.3",
"tailwindcss": "^3.1.7",
"weapp-tailwindcss-webpack-plugin": "^1.6.10"
}
}
vite.config.js
然后添加 vite.config.js 文件，注册 weapp-tailwindcss-webpack-plugin:
import path from "path";
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import vwt from "weapp-tailwindcss-webpack-plugin/vite";
import postcssWeappTailwindcssRename from "weapp-tailwindcss-webpack-plugin/postcss";
const isH5 = process.env.UNI_PLATFORM === "h5";
// vite 插件配置，注意一定要把 uni 注册在 vwt 前
const vitePlugins = [uni()];
const resolve = (p) => {
return path.resolve(__dirname, p);
};
const postcssPlugins = [
require("autoprefixer")(),
require("tailwindcss")({
config: resolve("./tailwind.config.js"),
}),
];
if (!isH5) {
vitePlugins.push(vwt());
postcssPlugins.push(postcssWeappTailwindcssRename({}));
}
// https://vitejs.dev/config/
export default defineConfig({
plugins: vitePlugins,
css: {
postcss: {
// 内联写法
plugins: postcssPlugins,
},
},
});
tailwind.config.js
添加 tailwind.config.js:
const path = require("path");
const resolve = (p) => {
return path.resolve(__dirname, p);
};
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./**/*.vue"].map(resolve),
theme: {
extend: {},
},
plugins: [],
corePlugins: {
preflight: false,
},
};
下面这点在上面的 vue2 中也提到了，我再重复一遍
这里特别注意，在声明所有路径时，必须声明为绝对路径！！！
因为 hbuilderx 有这样一个读取配置的策略：如果目标目录是相对路径，就会读取 '\HBuilderX\plugins\uniapp-cli\' 目录下的文件，这直接导致配置找不到，导致项目无法启动。
在 App.vue 中引入 tailwindcss
<style lang="scss">
/*每个页面公共css */
@import "tailwindcss/base";
@import "tailwindcss/utilities";
</style>
现在，你就可以在 hbuilderx 的 vue3 项目中愉快的使用 tailwindcss 了！
其他配置
.gitignore
unpackage
node_modules
.hbuilderx
HbuilderX 智能提示工具
DCloud-HBuilderX 团队提供了对应的插件，可以去
https://ext.dcloud.net.cn/plugin?id=8560 进行下载，即可产生智能提示。
关联项目
插件核心
weapp-tailwindcss-webpack-plugin 提供核心转义功能
CLI 工具
weapp-ide-cli: 一个微信开发者工具命令行，快速方便的直接启动 ide 进行登录，开发，预览，上传代码等等功能。
模板 template
uni-app-vite-vue3-tailwind-vscode-template
uni-app-vue3-tailwind-vscode-template
uni-app-vue2-tailwind-vscode-template
weapp-native-mina-tailwindcss-template
uni-app-vue2-tailwind-hbuilder-template
uni-app-vue3-tailwind-hbuilder-template
预设 tailwindcss preset
tailwindcss-miniprogram-preset