关于 weapp-tailwindcss-setup
为编码 Agent 提供 weapp-tailwindcss 接入配置的技能。它根据真实项目环境选择匹配的 bundler 或 CLI 路径，并要求通过构建验证配置。
主要功能
- 01读取项目配置与运行脚本
- 02按框架和目标端选择接入方式
- 03生成逐文件配置与命令
- 04验证构建、转译和 HMR
适用场景
- 01为小程序项目配置 Tailwind CSS
- 02判断项目应使用 CLI 还是 bundler 集成
- 03检查多端构建中的插件配置
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/weapp-tailwindcss-setup确认已加载。
附带文件agents/openai.yamlreferences/framework-matrix.md
详细介绍
来自项目 READMEweapp-tailwindcss setup
基于用户真实项目生成最小、可复制、可验证的接入配置。
工作流
- 读取项目的
package.json、Tailwind CSS 入口、框架配置和实际运行脚本。 - 确认框架、构建器、目标端、包版本、Node 版本；HBuilderX 项目同时确认 IDE 版本。
- 读取 references/framework-matrix.md，选择唯一匹配的注册位置和入口模式。
- 如果用户只需要单个 CSS 入口、stdin/stdout 或 canonicalize，选择独立 CLI；完整小程序项目继续使用 bundler 集成。
- bundler 项目先建立 Tailwind CSS 4 纯 CSS 入口，再让框架实际引入该入口，最后配置绝对路径
cssEntries。 - 只注册一次
WeappTailwindcss。保留业务 PostCSS 插件，但不要在同一次受管构建中再注册 Tailwind 官方生成插件。 - 多端项目保留 H5/Web 链路，让插件自动选择目标；只有明确完全跳过插件的独立目标才使用
disabled。 - 运行开发态和目标端构建，用新增任意值 class 验证生成、转译与 HMR。
配置原则
- 当前包 manifest 的 Node engine 是
^22.18.0 || >=24.11.0；不要把旧的>=22.12.0文案当成当前精确约束。 - HBuilderX 使用当前依赖时至少为 5.11，并用绝对路径避免 IDE 改变
process.cwd()的影响。 - Tailwind CSS 入口不要直接放在 Sass/Less/Stylus 文件中。
- 扫描只覆盖业务源码，默认排除
node_modules、dist、unpackage；uni-app 还应避免无差别扫描uni_modules。 - 普通业务项目优先使用官方 bundler 插件；只有自研构建器才转到
$weapp-tailwindcss-custom-build。 - Expo/React Native 转到
$weapp-tailwindcss-react-native，不要套用小程序 bundler 配置。 - ReactLynx/Rspeedy 转到
$weapp-tailwindcss-lynx，不要套用 React Native manifest 或小程序 class 转义。 - CLI 默认
--target web；--target weapp只对生成 CSS 做小程序兼容转换，不处理模板、脚本或已有 WXSS。
输出要求
输出框架与目标端结论、安装命令、逐文件完整配置、运行命令、预期产物和回滚点。不要只给选项列表。
评论
支持 Markdown