name: tailwind-responsive-ui description: Tailwind CSS应用程序的响应式UI转换模式。此技能应用于使界面响应式、为多个屏幕尺寸重构布局或审查响应式Tailwind代码。触发任务包括断点策略、布局适应、响应式间距、流体排版、移动导航、触摸交互、响应式媒体或数据表响应性。
社区响应式UI Tailwind CSS最佳实践
基于Adam Wathan和Steve Schoger的《Refactoring UI》以及现代响应式设计模式的全面响应式转换指南，适用于Tailwind CSS应用程序。包含8个类别中的49条规则，按影响优先级排序，以指导自动化重构和代码生成。
何时应用
在以下情况下参考这些指南：
- 使现有UI在不同屏幕尺寸上响应式
- 使用Tailwind CSS构建新的响应式布局
- 重构仅支持桌面的界面以支持移动设备
- 审查响应式代码以查找断点、间距和排版问题
- 为触摸设备适应导航、表单和数据表
按优先级分类的规则类别
| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | 断点策略 | 关键 | bp- |
| 2 | 布局转换 | 关键 | layout- |
| 3 | 响应式间距 | 高 | rspac- |
| 4 | 流体排版 | 高 | fluid- |
| 5 | 导航模式 | 中高 | nav- |
| 6 | 触摸与交互 | 中 | touch- |
| 7 | 响应式媒体 | 中 | rmedia- |
| 8 | 数据适应 | 低中 | data- |
快速参考
1. 断点策略（关键）
bp-mobile-first-default- 使用移动优先的断点方向bp-content-driven-breakpoints- 在内容中断处设置断点bp-avoid-device-widths- 避免设备特定的断点值bp-consolidate-breakpoints- 将断点合并为三个或四个bp-min-width-over-max- 使用min-width而非max-width作为断点bp-debug-breakpoints- 在开发期间使用视觉断点指示器
2. 布局转换（关键）
layout-stack-to-row- 在移动端堆叠元素，在桌面端排列成行layout-sidebar-collapse- 在移动端将侧边栏折叠到顶部或底部layout-grid-column-reduction- 在较窄断点减少网格列数layout-holy-grail-responsive- 使用响应式的圣杯布局与网格layout-sticky-to-static- 在移动端将粘性元素转换为静态layout-fixed-to-relative- 在移动端用相对定位替换固定定位layout-aspect-ratio-containers- 使用宽高比创建响应式容器
3. 响应式间距（高）
rspac-scale-padding-per-bp- 按断点独立缩放内边距rspac-responsive-gap- 使用响应式间距用于网格和弹性布局rspac-compact-mobile-generous-desktop- 在移动端使用紧凑间距，在桌面端使用宽松间距rspac-section-spacing- 随视口缩放分区间距rspac-inline-to-stack-spacing- 在移动端将行内间距转换为堆叠间距rspac-container-padding- 使用响应式容器内边距
4. 流体排版（高）
fluid-clamp-font-size- 使用clamp()进行流体字体大小调整fluid-responsive-line-height- 随字体大小增加收紧行高fluid-responsive-measure- 将行长度限制在45-75字符fluid-scale-headings-independently- 跨断点独立缩放标题大小fluid-responsive-letter-spacing- 调整响应式标题的字间距fluid-type-scale- 使用响应式类型比例
5. 导航模式（中高）
nav-horizontal-to-hamburger- 在移动端将水平导航折叠为汉堡菜单nav-tab-bar-mobile- 使用底部标签栏作为主要移动导航nav-breadcrumb-collapse- 在移动端截断面包屑导航nav-sidebar-drawer- 在移动端将侧边栏导航转换为离屏抽屉nav-dropdown-to-fullscreen- 在移动端将下拉菜单扩展为全宽nav-sticky-header-compact- 在移动端滚动时压缩头部
6. 触摸与交互（中）
touch-min-touch-target- 在移动端确保最小44px触摸目标touch-hover-to-tap- 用轻触友好的替代方案替换悬停交互touch-swipe-affordance- 为水平滚动添加视觉滑动提示touch-scroll-snap-mobile- 在类似轮播的移动界面中使用滚动捕捉touch-input-sizing-mobile- 调整表单输入大小以防止iOS缩放touch-focus-visible-touch- 使用focus-visible进行触摸友好的焦点样式
7. 响应式媒体（中）
rmedia-responsive-images- 使用响应式图片大小调整与object-fitrmedia-video-aspect-ratio- 跨断点保持视频宽高比rmedia-icon-size-scaling- 按断点缩放图标大小，而非随字体大小rmedia-avatar-responsive- 按上下文和断点缩放头像大小rmedia-background-image-bp- 在断点处切换背景图片rmedia-embed-responsive- 使用容器约束使嵌入内容响应式
8. 数据适应（低中）
data-table-to-cards- 在移动端将表格转换为卡片data-horizontal-scroll-table- 对密集数据表使用水平滚动data-responsive-data-grid- 根据屏幕尺寸适应数据网格密度data-list-density-mobile- 在移动端增加列表项密度data-truncate-overflow- 在移动端截断溢出文本data-responsive-form-layout- 在移动端堆叠表单字段，在桌面端使用网格
如何使用
阅读个别参考文件以获取详细解释和代码示例：
参考文件
| 文件 | 描述 |
|---|---|
| references/_sections.md | 类别定义和排序 |
| assets/templates/_template.md | 新规则的模板 |
| metadata.json | 版本和参考信息 |