uni-app cli vue3 vite

1. 安装

npm

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

Yarn

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

pnpm

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

Bun

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,
      cssEntries: [
        // 你 @import "weapp-tailwindcss"; 那个文件绝对路径
        path.resolve(import.meta.dirname, './src/app.css'),
      ],
    }),
  ],
  css: {
    postcss: {
      plugins: [
        tailwindcss(),
      ],
    },
  },
});

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 "dist";

在项目目录下的 App.vue 中，添加以下内容：

App.vue

<style src="./main.css"></style>

注意

千万不要在 uni.scss 中去引入 tailwindcss, uni.scss 本质上走的是 scss.additionalData, 它会在每一个 scss 文件的开头，都去添加 uni.scss 里的文件内容

所以这相当于你每个 scss/ vue 文件里面，都加了 tailwindcss 引入，那 css 体积就爆炸了

接着直接运行 npm run dev:mp-weixin，

微信开发者工具导入这个项目，即可看到效果

参考模板

uni-app-tailwindcss-v4