2. 安装这个插件并运行

安装插件

在项目目录下，执行:

npm

npm i -D weapp-tailwindcss weapp-vite

Yarn

yarn add --dev weapp-tailwindcss weapp-vite

pnpm

pnpm add -D weapp-tailwindcss weapp-vite

Bun

bun add --dev weapp-tailwindcss weapp-vite

这样 weapp-tailwindcss 和 weapp-vite 就被安装在你的本地了

执行初始化命令

在命令行中运行

npx weapp-vite init

这个命令会对现有的原生小程序项目，进行 weapp-vite 的初始化

执行后，会发现主要有许多文件改动，CLI 主要做了 3 件事情:

• 创建 vite.config.ts 文件，这个是 weapp-vite 和 vite 的配置文件
• 修改 package.json, 添加 dev 和 build 开发和构建脚本，还有构建 npm 和打开微信开发者工具
• 修改 project.config.json 内容，来适配构建产物
• 添加适配 vite 的 dts 和 tsconfig.json

安装所有的依赖包

在执行完成 weapp-vite init 初始化命令之后，我们需要在项目里执行一下安装命令:

npm

npm i

Yarn

yarn install

pnpm

pnpm i

Bun

bun install

注册插件

给 package.json 添加下列脚本:

package.json

{
  "scripts": {
    "postinstall": "weapp-tw patch"
  }
}

然后在你的 vite.config.ts 里对插件进行注册:

vite.config.ts

import { defineConfig } from 'weapp-vite/config'
import { UnifiedViteWeappTailwindcssPlugin as uvwt } from 'weapp-tailwindcss/vite'

export default defineConfig({
  plugins: [
    uvwt({
      rem2rpx: true,
    }),
  ],
})

开始运行

使用 npm run dev 进入开发模式, 此模式带有热更新的，主要用于开发

使用 npm run build 进行构建

不论是 npm run dev 还是 npm run build, 他们的构建产物，都在工程目录下的 dist 目录

使用微信开发者工具，直接导入工程目录，然后即可预览效果！

注意不是导入 dist 目录，是你工程的根目录! 通常是 dist 的父级目录，不要搞错了！

配置好的模板

假如你配置不成功，你可以参考以下模板进行配置文件对比:

weapp-vite-tailwindcss-template

或者直接执行命令:

npm

npx weapp-vite create my-app

Yarn

yarn dlx weapp-vite create my-app

pnpm

pnpm dlx weapp-vite create my-app

Bun

bun x weapp-vite create my-app

此命令会在当前目录下，创建一个目录名为 my-app 的 weapp-vite + weapp-tailwindcss 集成模板

原生组件样式的隔离性

提示

发现很多用户，在使用原生开发的时候，经常会问，为什么 tailwindcss 样式对自定义组件不生效。

这可能有以下几个原因:

1. 代码文件不在 tailwind.config.js 的 content 配置内
2. 原生小程序组件是默认开启 组件样式隔离 的，默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响。而 tailwindcss 生成的工具类，都在 app.wxss 这个全局样式文件里面。不属于组件内部，自然不生效。

这时候可以在你组件的 json 文件配置中，设置下面一行 styleIsolation 来开启样式共享:

custom-component.json

{
  "styleIsolation": "apply-shared"
}

apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；

来让组件应用到 app.wxss 里的样式。

更多的文档详见: 微信小程序相关开发文档

想了解更多 weapp-vite

更多场景和配置，请查看 weapp-vite 文档网站