weapp-tailwindcss-troubleshoot について
weapp-tailwindcss-troubleshootは、weapp-tailwindcssのビルドや実行時の問題を診断するスキルです。生成、変換、成果物、実行時の各段階を調べ、証拠に基づく最小修正と再現可能な検証を重視します。
主な機能
- 01症状マトリクスに沿った原因の特定
- 02Tailwindの入口、ソーススキャン、ビルドグラフの確認
- 03候補クラス、出力ファイル、実ページの個別検証
- 04初回ビルドとwatch/HMR障害の切り分け
- 05修正後の再現可能な回帰確認
活用シーン
- 01Tailwindスタイルが生成されない、適用されない問題の調査
- 02増分ビルドやHMRの問題の診断
- 03CLIのtarget、入出力、source mapの確認
- 04実行時の証拠に基づくWebView互換性の問題への対応
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/weapp-tailwindcss-troubleshootを入力して読み込まれたか確認します。
同梱ファイルagents/openai.yamlreferences/symptom-matrix.md
詳細
プロジェクトの README よりweapp-tailwindcss troubleshoot
从生成、转译、产物到运行时逐层定位根因，避免用配置猜测掩盖症状。
诊断顺序
- 收集最小复现：框架、bundler、目标端、版本、命令、原始 class、期望与实际产物。
- 读取 references/symptom-matrix.md，先归类症状，再执行对应最短路径。
- 检查 Tailwind 入口是否为纯 CSS、是否实际进入构建图、
cssEntries是否为绝对路径、@source是否覆盖源码。 - 检查是否存在第二个 Tailwind 生成器，或 H5/Web 被错误
disabled。 - 分别验证 CSS 候选、模板/JS safe class、最终平台样式文件和真实页面；不要只看固定的
app.wxss文件名。 - watch/HMR 问题要在同一进程连续新增 class，区分首次构建成功与增量图失效。
- CLI 问题先确认
web/weapptarget、stdin/stdout、source map 与 watch 模式，不期待它改写模板或脚本。 - 只有根因确认后才修改配置，并补一条可重复的回归验证。
安全边界
- 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 対応