【uniapp】---- 在 HBuilderX 中使用 tailwindcss

1. 前言

接手了一个uniapp的微信小程序项目，因为在上一个 taro 的项目中使用的 tailwindcss，感觉比较方便，又不想动项目中原来的代码，因此就配置 tailwindcss，在新创建的子包中使用。

2. 分析

vue2 版本的 uni-app 内置的 webpack 版本为 4 , postcss 版本为 7, 所以还是只能使用 @tailwindcss/postcss7-compat 版本。

3. package.json

新建一个vue2 uni-app项目，然后我们 npm init -y 在项目根目录创建一个 package.json，并安装依赖。

3.1 添加依赖

    "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"

3.2 原项目配置结果

4. vue.config.js

在 vue.config.js 文件，注册 weapp-tailwindcss-webpack-plugin。

4.1 注册

// 为了 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;

4.2 注册结果

5. tailwind.config.js

5.1 配置 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 也必须为绝对路径。

5.2 配置结果

6. postcss.config.js

6.1 配置 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",
    }),
  ],
};

这里特别注意ÿ