weapp-tailwindcss is a build toolchain that generates and adapts Tailwind CSS for web pages, mini-programs, app webviews, React Native, and Lynx applications. It is for developers who want one Tailwind-based styling workflow to produce CSS and styles for multiple platforms.
Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add sonofmagic/weapp-tailwindcss --skill weapp-tailwindcss-setupgit clone --depth 1 https://github.com/sonofmagic/weapp-tailwindcssWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/sonofmagic/weapp-tailwindcss/weapp-tailwindcss-setup)<a href="https://agentmods.dev/skills/sonofmagic/weapp-tailwindcss/weapp-tailwindcss-setup"><img src="https://agentmods.dev/badge/skills/sonofmagic/weapp-tailwindcss/weapp-tailwindcss-setup/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/sonofmagic/weapp-tailwindcss/weapp-tailwindcss-setup"><img src="https://agentmods.dev/badge/skills/sonofmagic/weapp-tailwindcss/weapp-tailwindcss-setup.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00128 | $0.00744 |
| Opus 5.5 | $0.00051 | $0.00298 |
| Sonnet 5.5 | $0.00026 | $0.00149 |
| Haiku 4.5 | $0.00013 | $0.00074 |
Grade A, and why
weapp-tailwindcss-setup scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
Copies of this mod
1 near-identical copy found in the catalogue:
- weapp-tailwindcss-setup — 100% identical, 0 lines differ
What it actually says
weapp-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。
输出要求
输出框架与目标端结论、安装命令、逐文件完整配置、运行命令、预期产物和回滚点。不要只给选项列表。
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago First seen · 35 lines · 128 tokens per session scan A ab9d35cbfcc5
weapp-tailwindcss-setup is a skill published in the GitHub repository sonofmagic/weapp-tailwindcss (1,865 stars, last pushed 5d ago), licensed MIT. It adds 128 tokens to every session and 744 once invoked, about $0.0005 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
nuxt-ui
Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.
uniwind
Uniwind — Tailwind CSS v4 styling for React Native. Use when adding, building, or debugging components in a React Native project that uses Uniwind classNames. Covers setup, Metro config, global.css, theming, className props, accent- color props, platform/data/state/responsive variants, CSS variables, custom utilities…
Cypress v14 Component Testing
Component testing patterns with Cypress v14 including React, Vue, and Angular component mounting, custom mount commands, interaction testing, visual snapshots, and integration with Vite and Webpack bundlers.
weapp-vite-best-practices
An engineering guide for building small-program projects with weapp-vite, a Vite-based toolchain for compiling mini-apps for several platforms.
weapp-devtools-e2e-best-practices
A testing workflow for WeChat mini-programs using WeChat DevTools and a headless runtime. WeChat DevTools is the official development environment; end-to-end tests check a feature through its real user flow.
native-to-weapp-vite-wevu-migration
A step-by-step guide for gradually moving native WeChat, Alipay, or Douyin mini-programs to weapp-vite, with an optional later move to Vue single-file components.