UniAppHbuilderShared
1. 安装
- npm
- Yarn
- pnpm
- Bun
# 初始化 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
bun init
# 安装包
bun add --dev 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'
import path from 'node:path'
export default defineConfig({
plugins: [
uni(),
UnifiedViteWeappTailwindcssPlugin({
rem2rpx: true,
tailwindcssBasedir: __dirname,
cssEntries: [
// 你 @import "weapp-tailwindcss"; 那个文件绝对路径
path.resolve(__dirname, './src/app.css'),
],
}),
],
css: {
postcss: {
plugins: [
tailwindcss({
base: __dirname
})
]
}
}
});
tailwindcss@4 必须配置
cssEntries并且使用绝对路径，否则tailwindcss生成的类名不会参与转译。
3. 添加样式
在 src/app.css 中引入 weapp-tailwindcss，这个文件会作为 cssEntries 的入口：
src/app.css
@import "weapp-tailwindcss";
为了 IDE 智能提示，再额外创建一个 main.css 并引入 weapp-tailwindcss/css。
src/main.css
@import "weapp-tailwindcss/css";
@source not "unpackage";
在项目目录下的 App.vue / App.uvue(uni-app x 项目) 然后添加以下内容：
App.vue
<style src="./main.css"></style>
添加
@source not "unpackage";是为了避免HBuilderX差量编译死循环问题
注意
千万不要在 uni.scss 中去引入 tailwindcss, uni.scss 本质上走的是 scss.additionalData, 它会在每一个 scss 文件的开头，都去添加 uni.scss 里的文件内容
所以这相当于你每个 scss/ vue 文件里面，都加了 tailwindcss 引入，那 css 体积就爆炸了
现在，在你的页面里面去随意的编写样式，比如 bg-[#123456] text-[#654321], 然后运行到微信开发者工具即可
