在 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 中也提到了，我再重复一遍

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

因为 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

Bugs & Issues

欢迎提交到此处

总结

以上是生活随笔为你收集整理的在 HBuilderX 中使用 tailwindcss的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。