uni-app x
提示
主线接入文档已合并到 uni-app x。本页保留给旧链接和 Tailwind CSS 4 专项排障。
weapp-tailwindcss@5 可以在 HBuilderX 的 uni-app x 项目中接入 Tailwind CSS 4。当前仓库用本地 HBuilderX E2E 覆盖了微信小程序、Android App、iOS App，以及 Web HMR 任意值类名连续新增场景。
本地验证
HBuilderX、Android 模拟器和 iOS 模拟器都依赖开发机环境，所以 App E2E 只在本地跑，不进入 CI/CD。
- npm
- Yarn
- pnpm
- Bun
npm run e2e:hbuilderx:local
npm run e2e:hbuilderx:local:android
npm run e2e:hbuilderx:local:ios
yarn e2e:hbuilderx:local
yarn e2e:hbuilderx:local:android
yarn e2e:hbuilderx:local:ios
pnpm run e2e:hbuilderx:local
pnpm run e2e:hbuilderx:local:android
pnpm run e2e:hbuilderx:local:ios
bun run e2e:hbuilderx:local
bun run e2e:hbuilderx:local:android
bun run e2e:hbuilderx:local:ios
安装
- npm
- Yarn
- pnpm
- Bun
npm init -y
npm install -D tailwindcss weapp-tailwindcss
yarn init -y
yarn add --dev tailwindcss weapp-tailwindcss
pnpm init -y
pnpm add -D tailwindcss weapp-tailwindcss
bun init -y
bun add --dev tailwindcss weapp-tailwindcss
注册插件
uni-app x 要使用 uniAppX 预设。Tailwind CSS 4 的入口建议放在纯 .css 文件里，并通过 cssEntries 显式传入绝对路径。
vite.config.ts
import path from 'node:path'
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import { uniAppX } from 'weapp-tailwindcss/presets'
import { WeappTailwindcss } from 'weapp-tailwindcss/vite'
export default defineConfig({
plugins: [
uni(),
WeappTailwindcss(
uniAppX({
base: __dirname,
cssEntries: [
path.resolve(__dirname, 'main.css'),
],
rem2rpx: true,
}),
),
],
})
不要再注册 @tailwindcss/postcss 或 @tailwindcss/vite。小程序和 App 目标下的 Tailwind 生成、类名转译与单位处理都由 weapp-tailwindcss 接管。
添加 CSS 入口
main.css
@import "tailwindcss" source(none);
@source "./App.uvue";
@source "./pages/**/*.{uts,uvue}";
@source "./components/**/*.{uts,uvue}";
@source "./stores/**/*.{uts,uvue}";
@source not "./uni_modules/**/*";
@source not "./unpackage/**/*";
@source 要覆盖页面、组件和可能产出类名的脚本目录。不要把 unpackage 放进扫描范围，否则 HBuilderX 产物会反过来干扰开发构建。
验证任意值类名
在任意页面写一段最小用例：
<view class="p-4">
<text class="bg-[#102938] text-[#f7fbff] w-[173px]">Tailwind CSS 4</text>
</view>
运行到微信小程序、Android 或 iOS 后，检查元素样式是否生效。仓库里的 App E2E 也会向页面追加 bg-[#102938] text-[#f7fbff] w-[173px]，再检查 HBuilderX 产物里是否出现转译后的类名。
布局限制
uni-app x中不要依赖gap、gap-x-*、gap-y-*space-x-*、space-y-*也不要作为跨端间距方案- 原生 App 端文本使用
<text>，文本相关样式要直接写在<text>上 - 需要跨端稳定的间距时，直接给子项写
mt-*/ml-*，或封装固定结构的间距组件
