Modern Tailwind 是一份围绕 Tailwind CSS 最佳实践的技能指南，目标是帮助开发者使用现代工具类与变体构建整洁、可扩展的用户界面。以下内容按用途、主要能力、使用方式、适用场景和限制分段整理。
一、用途 该技能面向使用 Tailwind CSS 进行界面开发的场景，提供一套成体系的实践约定，用于指导如何组织工具类、处理状态与响应式、扩展主题以及保持代码可维护性。其核心目标是让样式代码更整洁、更易扩展。
二、主要能力
- 核心原则：建议大多数样式优先使用工具类而非自定义 CSS；通过分组保持类名列表可读，分组顺序为布局→间距→排版→颜色→效果；先写语义化 HTML，工具类应起增强作用，而不是替代结构。
- 变体与状态：建议在合适场景使用 hover、focus-visible、disabled、dark 和 motion-safe 变体；优先使用 data-* 与 aria-* 变体来处理与 DOM 语义绑定的状态样式；使用 group 和 peer 处理父级/兄弟状态，无需额外 JavaScript。
- 响应式与容器查询：建议先写基础样式，再叠加响应式变体（sm、md、lg 等）；当布局依赖父容器尺寸时，使用容器查询工具类。
- 主题与自定义：建议在 tailwind.config 中扩展主题，而不是临时编写自定义类；当重复不可避免时，使用 @layer 定义自定义工具类或组件；除小型、可重复的模式外，避免使用 @apply。
- 可维护性：建议将可复用 UI 抽取为组件，而不是重复大段类名字符串；保持类名确定性，尽可能避免动态字符串拼接。
三、使用方式 资料未提供具体的安装命令、配置步骤或代码示例，暂未提供相关使用方式说明。该技能以实践约定与建议的形式呈现，供开发者在编写 Tailwind CSS 样式时参照。
四、适用场景 适用于使用 Tailwind CSS 构建用户界面的开发工作，尤其是需要处理状态样式、响应式布局、主题定制以及长期维护的样式代码库。
五、限制 资料未说明该技能的收费、价格、支持平台、具体效果或版本要求，暂未提供相关信息。