2. 安装 weapp-tailwindcss

在项目目录下，执行:

npm

npm i -D weapp-tailwindcss

# 假如 tailwindcss 在 weapp-tailwindcss 之后安装，可以手动执行一下 patch 方法
# npx weapp-tw patch

Yarn

npm i -D weapp-tailwindcss

# 假如 tailwindcss 在 weapp-tailwindcss 之后安装，可以手动执行一下 patch 方法
# yarn dlx weapp-tw patch

pnpm

npm i -D weapp-tailwindcss

# 假如 tailwindcss 在 weapp-tailwindcss 之后安装，可以手动执行一下 patch 方法
# pnpm dlx weapp-tw patch

Bun

npm i -D weapp-tailwindcss

# 假如 tailwindcss 在 weapp-tailwindcss 之后安装，可以手动执行一下 patch 方法
# bun x weapp-tw patch

然后把下列脚本，添加进你的 package.json 的 scripts 字段里:

package.json

 "scripts": {
   "postinstall": "weapp-tw patch"
 }

信息

执行 weapp-tw patch 主要是做2件事情

1. 给当前你本地的 tailwindcss 打上支持 rpx 的补丁 (小程序特有单位，非 web 标准)。

否则你一旦使用像 text-[14.43rpx] 这样的任意值写法，生成出来的 css 样式就是 color: 14.43rpx;，显然是错误的。

它会被 tailwindcss 认为是一种颜色，从而导致生成错误，样式不生效。

详见 rpx 任意值颜色或长度单位二义性与解决方案

2. 暴露 tailwindcss 运行上下文给 webpack/vite/glup 插件。

这样就能够在 js 中，和 postcss 插件进行通信，从而达到共享上下文的效果。

---

而添加上面一段 npm scripts 的用途是，利用 npm hook, 每次安装包后，都会自动执行一遍 weapp-tw patch 这个脚本。

这样即使 tailwindcss 更新了版本导致了补丁失效，也会在重新下载后，第一时间被打上。

我们已经完成了这些步骤了，最后就是注册这个插件，到各个不同的框架里去，马上就好！