weapp-vite 生成模式

weapp-vite 项目直接使用 WeappTailwindcss。生成模式会代理 Tailwind CSS 的样式生成，不需要再注册 @tailwindcss/vite。

vite.config.ts

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

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

app.css

@import "tailwindcss";
@source "./src/**/*.{wxml,js,ts,vue}";
@source "./app.{js,ts,json}";
@source not "./dist";

src/pages/index/index.wxml

<view class="space-y-4 p-[32rpx]">
  <view class="rounded-lg bg-[#123456] p-4 text-[32rpx] text-white">
    weapp-vite generator
  </view>
  <view class="{{ stateClass }}" hover-class="bg-emerald-600">
    WXML 动态类 + hover-class
  </view>
</view>

src/pages/index/index.ts

import { twMerge } from '@weapp-tailwindcss/merge'

Page({
  data: {
    stateClass: twMerge('bg-[#0000ff] text-[45rpx]', 'rounded-xl p-4 text-white'),
  },
})

验证命令：当前 weapp-vite 项目的 pnpm build。