Taro vite

安装

npm

npm install -D tailwindcss @tailwindcss/postcss postcss weapp-tailwindcss

Yarn

yarn add --dev tailwindcss @tailwindcss/postcss postcss weapp-tailwindcss

pnpm

pnpm add -D tailwindcss @tailwindcss/postcss postcss weapp-tailwindcss

Bun

bun add --dev tailwindcss @tailwindcss/postcss postcss weapp-tailwindcss

这里不使用 @tailwindcss/vite 是由于 taro 配置没法加载纯 esm 不是 cjs 的包, 会爆错误 No "exports" main defined

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

package.json

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

使用 pnpm@10+

pnpm@10 默认只允许 onlyBuiltDependencies 中的包运行生命周期脚本。安装完本插件后，请执行 pnpm approve-builds weapp-tailwindcss 将其加入白名单，避免 postinstall 的 weapp-tw patch 被跳过。

这是为了给 tailwindcss@4 打上支持 rpx 单位的补丁，否则它会把 rpx 认为是一种颜色

如需在补丁前强制刷新 tailwindcss-patch 的缓存，可改为：

package.json

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

默认不清理缓存；只有当你怀疑缓存导致补丁未生效或目标不一致时，才需要添加 --clear-cache。***

配置

config/index.ts

import { UnifiedViteWeappTailwindcssPlugin } from 'weapp-tailwindcss/vite'
import tailwindcss from '@tailwindcss/postcss'
import path from 'node:path'

{
  compiler: {
    type: 'vite',
    vitePlugins: [
      {
        name: 'postcss-config-loader-plugin',
        config(config) {
          // 加载 tailwindcss
          if (typeof config.css?.postcss === 'object') {
            config.css?.postcss.plugins?.unshift(tailwindcss())
          }
        },
      },
      UnifiedViteWeappTailwindcssPlugin({
        rem2rpx: true,
        cssEntries: [
          // 你 @import "tailwindcss"; 那个文件绝对路径
          path.resolve(__dirname, '../src/app.css'),
        ],
      }),
    ]
  },
}

tailwindcss@4 必须配置 cssEntries 并且使用绝对路径，否则 tailwindcss 生成的类名不会参与转译。

这里使用 vite 插件直接去加载 tailwindcss，这是由于 taro4 vite 不会自动去加载项目下的 postcss.config.js，所以只能定义这个 postcss-config-loader-plugin

添加样式

在项目目录下的 src/app.css 中，添加以下内容：

src/app.css

@import "tailwindcss";

关于 @import 'tailwindcss'

默认情况下，weapp-tailwindcss 的 rewriteCssImports 选项会自动将@import 'tailwindcss' 改写为 @import 'weapp-tailwindcss/index.css'。

这意味着你可以直接在项目中使用官方文档的写法 @import 'tailwindcss'，以获得更好的 IDE 智能提示 支持。

如果遇到报错或样式不生效，请手动改为 @import 'weapp-tailwindcss/index.css'， 或将rewriteCssImports 设置为false。

更改好配置之后，直接运行启动项目，微信开发者工具导入这个项目，即可看到效果。

参考模板

https://github.com/icebreaker-template/taro-vite-tailwindcss-v4