关于 modern-tailwind
面向界面开发与维护的 Tailwind CSS 实践技能，涵盖工具类组织、状态变体、响应式布局、主题定制和可复用组件。
主要功能
- 01按用途组织工具类
- 02使用语义化状态与无障碍变体
- 03采用响应式和容器查询工具类
- 04指导主题扩展与自定义层
- 05以可复用组件替代重复类名
适用场景
- 01用 Tailwind 工具类构建响应式页面
- 02无需额外 JavaScript 表达交互状态
- 03维护一致的主题与可复用 UI
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/modern-tailwind确认已加载。
详细介绍
Tailwind CSS 最佳实践
核心原则
- 大多数样式优先使用工具类，而不是自定义 CSS
- 按以下顺序分组，让类列表更易读：布局 → 间距 → 排版 → 颜色 → 效果
- 优先使用语义化 HTML；工具类应增强结构，而非取代结构
变体与状态
- 在适当情况下使用
hover、focus-visible、disabled、dark和motion-safe变体 - 对于与 DOM 语义相关的状态样式，优先使用
data-*和aria-*变体 - 使用
group和peer实现父级或兄弟元素的状态样式，无需额外的 JS
响应式与容器查询
- 从基础样式开始，然后添加响应式变体（
sm、md、lg等） - 布局取决于父级尺寸时，使用容器查询工具类
主题与自定义
- 在
tailwind.config中扩展主题，而不是临时添加自定义类 - 无法避免重复时，使用
@layer定义自定义工具类或组件 - 除少量可重复使用的样式模式外，避免使用
@apply
可维护性
- 将可复用的 UI 提取为组件，而不是重复大量类字符串
- 保持类名确定；尽可能避免动态拼接字符串
评论
支持 Markdown