@weapp-tailwindcss/variants-v3

@weapp-tailwindcss/variants-v3 是 tailwind-variant-v3 的小程序封装，内置 @weapp-tailwindcss/merge-v3，自动完成 escape/unescape 与类名合并。适用于 tailwindcss@3 项目。

安装

npm

pnpm add @weapp-tailwindcss/variants-v3

Yarn

pnpm add @weapp-tailwindcss/variants-v3
# couldn't auto-convert command

pnpm

pnpm add @weapp-tailwindcss/variants-v3
# couldn't auto-convert command

Bun

pnpm add @weapp-tailwindcss/variants-v3
# couldn't auto-convert command

tv：变体工厂

import { tv } from '@weapp-tailwindcss/variants-v3'

const tag = tv({
  base: 'inline-flex items-center rounded-full px-2 text-xs font-medium',
  variants: {
    tone: {
      neutral: 'bg-[#F4F4F5] text-[#18181B]',
      success: 'bg-[#DCFCE7] text-[#166534]',
    },
  },
  defaultVariants: {
    tone: 'neutral',
  },
})

tag({ tone: 'success' }) // => 已转义类名

cn / createTV

import { cn, createTV } from '@weapp-tailwindcss/variants-v3'

const mergeLater = cn('text-[#ececec]', isActive && 'text-[#ECECEC]')
mergeLater() // => 合并 + escape

const tvBase = createTV({ twMerge: false })

小程序 + Web

import { create } from '@weapp-tailwindcss/variants-v3'

// 跨平台框架请自行判断是否为 H5 构建，通常可从环境变量读取。
const isH5 = true
const { tv } = create({
  escape: !isH5,
  unescape: !isH5,
})

const card = tv({
  base: 'rounded-xl border border-[#E2E8F0] bg-white',
})

Demo：复用同一配置

import { tv, create } from '@weapp-tailwindcss/variants-v3'

const config = {
  base: 'inline-flex items-center rounded-md px-3 py-2 text-sm font-medium',
  variants: {
    tone: {
      primary: 'bg-[#2563EB] text-white',
      danger: 'bg-[#DC2626] text-white',
    },
  },
  defaultVariants: {
    tone: 'primary',
  },
}

const button = tv(config)
// 跨平台框架请自行判断是否为 H5 构建，通常可从环境变量读取。
const isH5 = true
const { tv: tvRuntime } = create({ escape: !isH5, unescape: !isH5 })
const buttonWeb = tvRuntime(config)

常见注意事项

• Tailwind v4：请改用 @weapp-tailwindcss/variants。
• Web-only 项目：可直接使用 tailwind-variant-v3。