跳到主要内容

packages-runtime 总览

packages-runtimeweapp-tailwindcss 的运行时能力集合,用来把编译期的类名规则延伸到小程序端,解决「动态类名冲突」「非法字符转义」「多端一致性」等问题。它们基于 @weapp-tailwindcss/runtime 提供 escape/unescape 与工厂能力,配合不同的 Tailwind 版本进行组合。

运行时矩阵

包名Tailwind 版本适用场景说明
@weapp-tailwindcss/mergev4小程序 / 多端项目tailwind-merge@3 兼容实现,默认入口
@weapp-tailwindcss/merge-v3v3旧项目 / 长期维护tailwind-merge@2 兼容实现
@weapp-tailwindcss/cvav3/v4组件变体工厂class-variance-authority 运行时封装
@weapp-tailwindcss/variantsv4组件变体 + slotstailwind-variants 运行时封装
tailwind-variant-v3v3Web / 通用 runtime上游 v3 runtime,可接入 twMergeAdapter
@weapp-tailwindcss/variants-v3v3小程序 / 多端基于 tailwind-variant-v3 + merge-v3 的封装

@weapp-tailwindcss/runtime 是底座包,通常作为间接依赖自动安装,无需单独引入。

版本选择

  • Tailwind v4:优先 @weapp-tailwindcss/merge + @weapp-tailwindcss/variants;需要变体工厂时加 @weapp-tailwindcss/cva
  • Tailwind v3:优先 @weapp-tailwindcss/merge-v3 + @weapp-tailwindcss/variants-v3;仅 Web 或需要定制合并器时可用 tailwind-variant-v3

多端心智模型(小程序 + Web)

小程序端需要 escape/unescape 来保持类名合法;Web 端则希望保留原始类名。各包的 create(...) 工厂允许你为不同端生成隔离实例:

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

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

这套模式同样适用于 cvatvcn 等变体工具,详见各包的「多端用法」与「多端 Demo」章节。

章节速览