源自 GitHubTailwind响应式样式开发
该能力专为现代前端工程设计，基于Tailwind CSS（支持v4.1+特性）提供全套原子化样式构建方案。覆盖从移动优先的响应式断点控制、Flexbox与Grid自适应网格排版，到深色主题切换、表单控件美化、动画过渡及无障碍交互规范。不仅能输出规范的React/Vue/Svelte组件样式代码，还提供类名精简建议、生产环境CSS摇树优化及常见样式冲突的排查指导。
它会先理解你的原始内容和目标，再按清晰的步骤完成处理。你不需要学习复杂命令，也不用理解背后的技术细节。
常见场景
它能帮你做什么？
01
02
03
三步完成
怎么使用
1安装 Skill
把右侧安装请求发给你的 AI。
2说清楚目标
告诉 AI 你想完成什么，或直接贴入内容。
3检查结果
按需要继续调整语气、范围或格式。
复制就能用
你可以直接这样说
“使用 Tailwind CSS 编写一个在移动端单列排列、平板双列、桌面端四列的响应式商品卡片，包含图片裁切、价格标签与加购按钮样式”
“为后台管理系统的顶部导航栏配置暗黑模式类名，支持深浅背景无缝切换并确保文本可读性对比度”
“编写一套具有悬停微动效、聚焦环（focus-ring）和禁用态的 Tailwind 表单输入框与主操作按钮组件”
适用人群
适合谁？
上手门槛
使用难度
进阶
需要了解任务流程，页面已整理好使用步骤。
兼容范围
支持哪些 AI？
Codex可直接使用
Claude Code可直接使用
OpenClaw可直接使用
Hermes可直接使用国内 Agent可直接使用
中文用户增强
Skill Px 做了什么？
中文说明简化使用方式补充中文案例整理安装流程降低理解难度
