在微信小程序中使用tailwind css v4

确认环境信息

应该确保你的nodejs版本大于v22。后面会贴出版本过低导致依赖安装失败的日志

node -v
v22.14.0

npm -v
10.9.2

pnpm -v
10.5.2

初始化项目

选一款趁手的打包工具，这里选择weapp-vite

pnpm create weapp-vite@latest
# 选择默认模板

集成tailwind

当然不是像tailwindcss v4官方文档一样去做，因为微信小程序的样式只是css的子集，有些功能wxss不支持。因此就需要为微信小程序做适配，比如rpx是微信小程序样式特有的单位。这个轮子已经有前辈造好了，就是weapp-tailwindcss 插件，具体操作参考集成文档。

站在巨人的肩膀上 –图灵教育

安装依赖

#npm
npm install -D tailwindcss @tailwindcss/postcss @tailwindcss/vite postcss weapp-tailwindcss
# pnpm
pnpm add -D tailwindcss @tailwindcss/postcss @tailwindcss/vite postcss weapp-tailwindcss
# yarn
yarn add --dev tailwindcss @tailwindcss/postcss @tailwindcss/vite postcss weapp-tailwindcss

配置

更改 vite.config.ts 注册 weapp-tailwindcss

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

export default defineConfig({
  plugins: [
    UnifiedViteWeappTailwindcssPlugin({
      rem2rpx: true,
      tailwindcss: {
        // 显示声明用的是 tailwindcss v4
        version: 4,
        v4: {
          cssEntries: [
            // app.css 的路径
            path.resolve(import.meta.dirname, './app.css'),
          ],
        },
      },
    }),
  ],
})

添加样式引用

在项目目录下，小程序全局的 app.css|app.scss|app.less 中，添加以下内容：

@import "weapp-tailwindcss";

启动项目

# 安装依赖
pnpm i

# 启动开发服务
pnpm dev

# 打开微信开发者工具
pnpm open

# 或者启动并打开
pnpm dev:open

node版本不对会发生什么

node -v
v20.11.0

pnpm i 
Lockfile is up to date, resolution step is skipped
Packages: +500
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

   ╭──────────────────────────────────────────────────────────────────╮
   │                                                                  │
   │                Update available! 9.15.4 → 10.5.2.                │
   │   Changelog: https://github.com/pnpm/pnpm/releases/tag/v10.5.2   │
   │                Run "pnpm add -g pnpm" to update.                 │
   │                                                                  │
   ╰──────────────────────────────────────────────────────────────────╯

Progress: resolved 500, reused 484, downloaded 16, added 500, done
node_modules/.pnpm/weapp-tailwindcss@4.0.8_tailwindcss@4.0.9/node_modules/weapp-tailwindcss: Running postinstall script, failed in 1.2s
.../node_modules/weapp-tailwindcss postinstall$ node bin/weapp-tailwindcss.js patch
│ node:internal/modules/cjs/loader:1204
│     throw new ERR_REQUIRE_ESM(filename, true);
│     ^
│ Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\jack\WeChatProjects\weap-vite-test1\node_modules\.pnpm\c12@3.0.2\node_modules\c12\dist\index.mjs not supported.
│ Instead change the require of C:\Users\jack\WeChatProjects\weap-vite-test1\node_modules\.pnpm\c12@3.0.2\node_modules\c12\dist\index.mjs to a dynamic import() which is available in all C…  
│     at Object.<anonymous> (C:\Users\jack\WeChatProjects\weap-vite-test1\node_modules\.pnpm\@tailwindcss-mangle+config@5.0.5\node_modules\@tailwindcss-mangle\config\dist\index.cjs:44:18)…  
│   code: 'ERR_REQUIRE_ESM'
│ }
│ Node.js v20.11.0
└─ Failed in 1.2s at C:\Users\jack\WeChatProjects\weap-vite-test1\node_modules\.pnpm\weapp-tailwindcss@4.0.8_tailwindcss@4.0.9\node_modules\weapp-tailwindcss
 ELIFECYCLE  Command failed with exit code 1.