帮助用户在 uni-app、taro、uni-app x 与原生小程序项目中接入和排障 weapp-tailwindcss。Use when 用户提到 weapp-tailwindcss、小程序 Tailwind 不生效、rpx 任意值、JS 字符串 class、space-y/space-x、weapp-tw patch、content/@source、twMerge/cva/tv。
用于业务项目接入 weapp-tailwindcss,并让 AI 稳定完成“小程序 + 多端”配置、排障与 Tailwind 写法规范落地。
本 Skill 服务“项目使用者”场景,不是仓库内部二次开发指南。
tailwindcss + weapp-tailwindcssuni-app / taro / uni-app x / 原生小程序)H5 / App)配置rpx 任意值异常、JS 字符串 class 未转译等问题排查先判断用户当前任务类型,再进入对应流程:
缺少关键信息时,先补齐后再输出方案:
uni-app / taro / uni-app x / 原生小程序 / 其他vite / webpack5 / webpack4 / 其他H5 / Apptailwindcss 主版本(v3 / v4)与包管理器(重点确认是否 pnpm@10+)node 版本(建议 ^20.19.0 || >=22.12.0)tailwindcss@3 用 tailwind.config.js -> contenttailwindcss@4 用入口 CSS 的 @sourcedist / unpackage / node_modulespostinstall 需要有 weapp-tw patchpnpm@10+,提醒执行 pnpm approve-builds weapp-tailwindcssweapp-tw patch --clear-cache集成/迁移任务:
按框架给出“可复制最小配置”,不要只给概念
多端场景下,明确 disabled 条件,避免把小程序插件能力无条件作用到纯 H5
排障任务:
先按“症状 -> 最短排查路径”输出步骤,再给修复示例
明确每一步“期望现象/验证点”,避免模糊建议
写法规范任务:
按“推荐写法 / 反例 / 评审清单”输出
需要运行时拼类时,优先 @weapp-tailwindcss/merge / cva / variants
涉及封装重命名时,提醒 ignoreCallExpressionIdentifiers
rpx)、变体/伪类JS/TS 中 class 不生效,优先检查 content/@source 是否覆盖该文件与扩展名space-y-* / space-x-* 不生效,固定优先级:view/text 或外层补 view)virtualHostcssChildCombinatorReplaceValue(保持最小标签集合)最终输出必须包含:
pnpm)若用户要求“规范沉淀”,额外补充:
weapp-tw patch,否则 rpx 与 JS 转译链路可能失效H5 场景content/@source 范围配置;这会直接导致 class 不生成cva/tvtext-[22rpx]、bg-[22rpx] 等二义性任意值,提供 length: / color: 前缀作为兜底写法twMerge / twJoin / cva / cn / tv 的封装或重命名时,提醒配置 ignoreCallExpressionIdentifiersweappTwIgnorespace-y-* / space-x-*,默认按 view + view(含 text)处理,不要假设会自动覆盖全部标签space-y-* / space-x-* 的标签扩展应最小化,只加入业务确实需要的标签,避免选择器污染JS 转译基于 classNameSet 精确命中,禁止启发式兜底转译