uni-app x
注意
暂时只支持 hbuilderx uni-app x 跨 h5 和小程序平台，原生安卓和IOS平台正在开发中，暂不支持
1. 安装
- npm
- Yarn
- pnpm
# 初始化 package.json
npm init
# 安装包
npm install -D tailwindcss @tailwindcss/postcss weapp-tailwindcss
# 初始化 package.json
yarn init
# 安装包
yarn add --dev tailwindcss @tailwindcss/postcss weapp-tailwindcss
# 初始化 package.json
pnpm init
# 安装包
pnpm add -D tailwindcss @tailwindcss/postcss weapp-tailwindcss
然后把下列脚本，添加进你的 package.json 的 scripts 字段里:
package.json
"scripts": {
"postinstall": "weapp-tw patch"
}
这是为了给 tailwindcss@4 打上支持 rpx 单位的补丁，否则它会把 rpx 认为是一种颜色
2. 添加 vite.config.ts
vite.config.ts
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import { UnifiedViteWeappTailwindcssPlugin } from 'weapp-tailwindcss/vite'
import tailwindcss from '@tailwindcss/postcss'
export default defineConfig({
plugins: [
uni(),
UnifiedViteWeappTailwindcssPlugin(
{
rem2rpx: true,
tailwindcssPatcherOptions: {
patch: {
tailwindcss: {
v4: {
base: __dirname
}
}
}
}
}
)
],
css: {
postcss: {
plugins: [
tailwindcss({
base: __dirname
})
]
}
}
});
3. 添加样式
在项目目录下的 App.vue / App.uvue(uni-app x 项目) 然后添加以下内容：
App.vue
<style>
@import "weapp-tailwindcss/css";
@source not "unpackage";
</style>
添加
@source not "unpackage";是为了避免HBuilderX差量编译死循环问题
现在，在你的页面里面去随意的编写样式，比如 bg-[#123456] text-[#654321], 然后运行到微信开发者工具即可
