在 HBuilderX 中使用 tailwindcss

！！！建议直接看项目 https://github.com/sonofmagic/uni-app-vue2-tailwind-hbuilder-template 模板
因为后续又做了一些兼容性改动，但是文章里面没有提及，比如 postcss 配置现在为了适配多端有些变化啥的。

在 HBuilderX 中使用 tailwindcss
- 前言
- 快速使用模板
- 从 0 到 1 的搭建过程
  - vue2 版本
    - package.json
    - vue.config.js
    - postcss.config.js
    - tailwind.config.js
    - 在 App.vue 中引入 tailwindcss
  - vue3 版本
    - package.json
    - vite.config.js
    - tailwind.config.js
    - 在 App.vue 中引入 tailwindcss
- 其他配置
  - .gitignore
  - HbuilderX 智能提示工具
- 关联项目
  - 插件核心
  - CLI 工具
  - 模板 template
  - 预设 tailwindcss preset
- Bugs & Issues

前言

之前我写了一个 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 转 rpxrequire("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 中也提到了，我再重复一遍

这里特别注意，在声明所有路径时，必须声明为绝对路径!!!

在 `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

Bugs & Issues

欢迎提交到此处