在 HBuilderX 中使用 tailwindcss

原创

已于 2022-11-07 10:34:31 修改 · 1.9k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #vue.js #javascript #hbuilder #uni-app

于 2022-07-31 14:45:08 首次发布

本文详细介绍了如何在HBuilderX中使用tailwindcss，包括vue2和vue3项目的配置步骤，涉及package.json、vue.config.js或vite.config.js、postcss.config.js、tailwind.config.js的设置，以及在App.vue中引入tailwindcss。还提供了快速使用模板链接和注意事项，如配置文件需使用绝对路径。

在 HBuilderX 中使用 tailwindcss

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

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