评论

在 HBuilderX 中使用 tailwindcss

2022-07-31
1722浏览
0评论

在 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

Bugs & Issues

欢迎提交到此处

点赞 2
收藏
评论
请 登录 后发表内容
作者介绍

文章标签