uni-app 生成模式

uni-app 项目优先使用构建器入口的 WeappTailwindcss。生成模式会代理 Tailwind CSS 样式生成，并同步处理 Vue 模板、JS 中的类名。

uni-app Vue Vite

仓库示例：demo/uni-app-tailwindcss-v5。

vite.config.ts

import { createRequire } from 'node:module'
import path from 'node:path'
import uni from '@dcloudio/vite-plugin-uni'
import { defineConfig } from 'vite'
import { WeappTailwindcss } from 'weapp-tailwindcss/vite'

const require = createRequire(import.meta.url)
const uniMpVueRuntimePath = require.resolve('@dcloudio/uni-mp-vue/dist/vue.runtime.esm.js')

export default defineConfig(async () => {
  return {
    plugins: [
      uni(),
      WeappTailwindcss({
        rem2rpx: true,
        generator: true,
        cssEntries: [
          path.resolve(__dirname, 'src/main.css'),
          path.resolve(__dirname, 'src/common.css'),
        ],
      }),
    ],
    resolve: {
      alias: {
        '@dcloudio/uni-mp-vue/dist/vue.runtime.esm.js': uniMpVueRuntimePath,
      },
    },
  }
})

src/main.css

@import "tailwindcss";
@config "../tailwind.config.js";
@source not "../src/uni_modules";

@theme {
  --color-midnight: #121063;
  --color-tahiti: #3ab7bf;
  --color-bermuda: #78dcca;
}

src/pages/index/index.vue

<template>
  <view class="flex flex-col gap-4 p-6">
    <text class="text-[88rpx] font-bold text-[#00f285] underline">{{ title }}</text>
    <view class="rounded-xl bg-midnight p-4 text-tahiti shadow-[0_8rpx_24rpx_rgba(0,0,0,0.18)]">
      @theme token + arbitrary shadow
    </view>
    <view :class="className" class="active:bg-emerald-600">
      classNameSet 精确命中的动态类
    </view>
  </view>
</template>

<script setup lang="ts">
import { twMerge } from '@weapp-tailwindcss/merge'
import { ref } from 'vue'

const title = ref('v5 generator')
const className = ref(twMerge('bg-[#0000ff] text-[45rpx]', 'text-white rounded-lg p-4'))
</script>

验证命令：pnpm --filter @weapp-tailwindcss-demo/uni-app-tailwindcss-v5 build

uni-app Vue2 Webpack

适合仍使用 Vue CLI / Webpack 编译的 uni-app Vue2 小程序项目。Webpack 插件负责代理 Tailwind CSS 生成小程序 CSS，并同步处理模板与 JS 中的类名。

vue.config.js

const path = require('node:path')
const { WeappTailwindcss } = require('weapp-tailwindcss/webpack')

module.exports = {
  configureWebpack(config) {
    config.plugins.push(
      new WeappTailwindcss({
        rem2rpx: true,
        generator: true,
        cssEntries: [
          path.resolve(__dirname, './src/app.css'),
        ],
      }),
    )
  },
}

src/app.css

@import "tailwindcss";
@config "../tailwind.config.js";
@source "./**/*.{vue,js,ts}";
@source not "../dist";
@source not "../unpackage";

src/pages/index/index.vue

<template>
  <view class="space-y-4 p-[32rpx]">
    <view class="rounded-lg bg-[#123456] p-4 text-[32rpx] text-white">
      uni-app Vue2 Webpack generator
    </view>
    <view :class="stateClass" hover-class="bg-emerald-600">
      动态类 + hover-class 精确转译
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      stateClass: twMerge('bg-[#0000ff] text-[45rpx]', 'rounded-xl p-4 text-white'),
    }
  },
}
</script>

验证命令：pnpm build:apps 或当前 uni-app 项目的构建命令。