Weapp-vite

externalClasses 提醒

weapp-vite 自定义组件如果声明了 externalClasses，请在插件配置的 customAttributes 中列出这些属性。否则像 my-class="bg-[#fafa00] text-[40px]" 这样的写法会被微信开发者工具拆成无效片段，导致样式失效。

详细说明与更多示例请查阅 👉 《组件外部样式类（externalClasses）的支持》。

安装

npm

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

Yarn

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

pnpm

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

Bun

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

然后把下列脚本，添加进你的 package.json 的 scripts 字段里:

package.json

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

这是为了给 tailwindcss@4 打上支持 rpx 单位的补丁，否则它会把 rpx 认为是一种颜色

配置

更改 vite.config.ts 注册 weapp-tailwindcss

vite.config.ts

import path from 'node:path'
import tailwindcss from '@tailwindcss/vite'
import { UnifiedViteWeappTailwindcssPlugin } from 'weapp-tailwindcss/vite'
import { defineConfig } from 'weapp-vite/config'

export default defineConfig({
  plugins: [
    UnifiedViteWeappTailwindcssPlugin({
      rem2rpx: true,
      cssEntries: [
        // app.css 的路径
        path.resolve(import.meta.dirname, './app.css'),
      ],
    }),
  ],
})

添加 postcss.config.js 注册 @tailwindcss/postcss

postcss.config.js

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

添加样式

在项目目录下，小程序全局的 app.css 中，添加以下内容：

app.css

@import "weapp-tailwindcss";

更改好配置之后，直接启动即可