在 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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。