mcpField
W
weapp-tailwindcss-troubleshoot

weapp-tailwindcss-troubleshoot

github.com/sonofmagic开发2119 次安装今天更新
代码仓库

关于 weapp-tailwindcss-troubleshoot

weapp-tailwindcss-troubleshoot 是用于排查 weapp-tailwindcss 构建与运行问题的技能,按生成、转译、产物和运行时逐层定位根因。它要求先收集证据,再做最小修复并验证。

主要功能

  1. 01按症状矩阵逐步定位问题
  2. 02检查 Tailwind 入口、源码扫描和构建图
  3. 03分别验证候选类、产物与真实页面
  4. 04区分首次构建与 watch/HMR 故障
  5. 05修复后提供可重复的回归验证

适用场景

  1. 01排查 Tailwind 样式未生成或未应用
  2. 02诊断增量构建和 HMR 问题
  3. 03核验 CLI target、输入输出及 source map
  4. 04根据真实运行证据处理 WebView 兼容问题

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/sonofmagic/skills --skill weapp-tailwindcss-troubleshoot

安装后在 Claude Code 中输入/weapp-tailwindcss-troubleshoot确认已加载。

附带文件agents/openai.yamlreferences/symptom-matrix.md

详细介绍

来自项目 README

weapp-tailwindcss troubleshoot

从生成、转译、产物到运行时逐层定位根因,避免用配置猜测掩盖症状。

诊断顺序

  1. 收集最小复现:框架、bundler、目标端、版本、命令、原始 class、期望与实际产物。
  2. 读取 references/symptom-matrix.md,先归类症状,再执行对应最短路径。
  3. 检查 Tailwind 入口是否为纯 CSS、是否实际进入构建图、cssEntries 是否为绝对路径、@source 是否覆盖源码。
  4. 检查是否存在第二个 Tailwind 生成器,或 H5/Web 被错误 disabled。
  5. 分别验证 CSS 候选、模板/JS safe class、最终平台样式文件和真实页面;不要只看固定的 app.wxss 文件名。
  6. watch/HMR 问题要在同一进程连续新增 class,区分首次构建成功与增量图失效。
  7. CLI 问题先确认 web/weapp target、stdin/stdout、source map 与 watch 模式,不期待它改写模板或脚本。
  8. 只有根因确认后才修改配置,并补一条可重复的回归验证。

安全边界

  • JS 转译只接受 Tailwind 验证过的 classNameSet;未命中时修复扫描或刷新时序,不启用启发式全字符串转译。
  • space-* 先处理结构和组件虚拟节点,再最小扩展 cssOptions.cssChildCombinatorReplaceValue。
  • App WebView 兼容必须记录 Android Chromium、iOS WebKit 或 Harmony/HBuilderX 环境,并以真实运行截图或日志为证据。
  • 不为排障临时加入 @tailwindcss/vite 或 @tailwindcss/postcss。
  • ReactLynx/Rspeedy 构建与 CSS encoder 问题转到 $weapp-tailwindcss-lynx。

输出要求

先给根因层级和证据,再给最小修复、验证命令、预期结果和未解决时的下一条观测点。

评论

支持 Markdown