tailwind-responsive-ui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Community Responsive UI Tailwind CSS Best Practices

社区版Tailwind CSS响应式UI最佳实践

Comprehensive responsive transformation guide for Tailwind CSS applications, based on Refactoring UI by Adam Wathan & Steve Schoger and modern responsive design patterns. Contains 49 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

这是一份针对Tailwind CSS应用的全面响应式转换指南，基于Adam Wathan和Steve Schoger所著的《Refactoring UI》以及现代响应式设计模式编写。指南包含8个类别下的49条规则，按影响优先级排序，可用于指导自动化重构与代码生成。

When to Apply

适用场景

Reference these guidelines when:

Making an existing UI responsive across screen sizes
Building new responsive layouts with Tailwind CSS
Refactoring desktop-only interfaces for mobile support
Reviewing responsive code for breakpoint, spacing, and typography issues
Adapting navigation, forms, and data tables for touch devices

在以下场景中可参考本指南：

为现有UI实现跨屏幕尺寸的响应式适配
使用Tailwind CSS构建全新的响应式布局
重构仅支持桌面端的界面以适配移动端
审查响应式代码中的断点、间距与排版问题
为触控设备适配导航、表单与数据表格

Rule Categories by Priority

按优先级划分的规则类别


bp-
layout-
rspac-
fluid-
nav-
touch-
rmedia-
data-

Priority	Category	Impact	Prefix
1	Breakpoint Strategy	CRITICAL	`bp-`
2	Layout Transformation	CRITICAL	`layout-`
3	Responsive Spacing	HIGH	`rspac-`
4	Fluid Typography	HIGH	`fluid-`
5	Navigation Patterns	MEDIUM-HIGH	`nav-`
6	Touch & Interaction	MEDIUM	`touch-`
7	Responsive Media	MEDIUM	`rmedia-`
8	Data Adaptation	LOW-MEDIUM	`data-`


bp-
layout-
rspac-
fluid-
nav-
touch-
rmedia-
data-

优先级	类别	影响程度	前缀
1	断点策略	关键	`bp-`
2	布局转换	关键	`layout-`
3	响应式间距	高	`rspac-`
4	流体排版	高	`fluid-`
5	导航模式	中高	`nav-`
6	触摸与交互	中	`touch-`
7	响应式媒体	中	`rmedia-`
8	数据适配	中低	`data-`

Quick Reference

快速参考

1. Breakpoint Strategy (CRITICAL)

1. 断点策略（关键）

```
bp-mobile-first-default
```
- Use Mobile-First Breakpoint Direction
```
bp-content-driven-breakpoints
```
- Set Breakpoints Where Content Breaks
```
bp-avoid-device-widths
```
- Avoid Device-Specific Breakpoint Values
```
bp-consolidate-breakpoints
```
- Consolidate Breakpoints to Three or Four
```
bp-min-width-over-max
```
- Use min-width Over max-width for Breakpoints
```
bp-debug-breakpoints
```
- Use Visual Breakpoint Indicators During Development

```
bp-mobile-first-default
```
- 采用移动端优先的断点方向
```
bp-content-driven-breakpoints
```
- 基于内容断点设置适配节点
```
bp-avoid-device-widths
```
- 避免使用设备特定的断点值
```
bp-consolidate-breakpoints
```
- 将断点合并为3到4个
```
bp-min-width-over-max
```
- 优先使用min-width而非max-width设置断点
```
bp-debug-breakpoints
```
- 开发期间使用可视化断点指示器

2. Layout Transformation (CRITICAL)

2. 布局转换（关键）

```
layout-stack-to-row
```
- Stack Elements on Mobile, Row on Desktop
```
layout-sidebar-collapse
```
- Collapse Sidebar to Top or Bottom on Mobile
```
layout-grid-column-reduction
```
- Reduce Grid Columns at Narrower Breakpoints
```
layout-holy-grail-responsive
```
- Use Responsive Holy Grail Layout with Grid
```
layout-sticky-to-static
```
- Convert Sticky Elements to Static on Mobile
```
layout-fixed-to-relative
```
- Replace Fixed Positioning with Relative on Mobile
```
layout-aspect-ratio-containers
```
- Use Aspect Ratio for Responsive Containers

```
layout-stack-to-row
```
- 移动端采用堆叠布局，桌面端采用行布局
```
layout-sidebar-collapse
```
- 移动端将侧边栏折叠为顶部或底部导航
```
layout-grid-column-reduction
```
- 在窄屏断点下减少网格列数
```
layout-holy-grail-responsive
```
- 使用Grid实现响应式圣杯布局
```
layout-sticky-to-static
```
- 移动端将粘性元素转换为静态定位
```
layout-fixed-to-relative
```
- 移动端用相对定位替代固定定位
```
layout-aspect-ratio-containers
```
- 使用宽高比实现响应式容器

3. Responsive Spacing (HIGH)

3. 响应式间距（高）

```
rspac-scale-padding-per-bp
```
- Scale Padding Independently Per Breakpoint
```
rspac-responsive-gap
```
- Use Responsive Gap for Grid and Flex Spacing
```
rspac-compact-mobile-generous-desktop
```
- Use Compact Spacing on Mobile, Generous on Desktop
```
rspac-section-spacing
```
- Scale Section Dividers with Viewport
```
rspac-inline-to-stack-spacing
```
- Convert Inline Spacing to Stack Spacing on Mobile
```
rspac-container-padding
```
- Use Responsive Container Padding

```
rspac-scale-padding-per-bp
```
- 为每个断点独立设置内边距缩放比例
```
rspac-responsive-gap
```
- 为Grid和Flex布局使用响应式间距
```
rspac-compact-mobile-generous-desktop
```
- 移动端采用紧凑间距，桌面端采用宽松间距
```
rspac-section-spacing
```
- 随视窗大小调整区块分隔间距
```
rspac-inline-to-stack-spacing
```
- 移动端将内联间距转换为堆叠间距
```
rspac-container-padding
```
- 使用响应式容器内边距

4. Fluid Typography (HIGH)

4. 流体排版（高）

```
fluid-clamp-font-size
```
- Use clamp() for Fluid Font Sizing
```
fluid-responsive-line-height
```
- Tighten Line Height as Font Size Increases
```
fluid-responsive-measure
```
- Constrain Line Length to 45-75 Characters
```
fluid-scale-headings-independently
```
- Scale Heading Sizes Independently Across Breakpoints
```
fluid-responsive-letter-spacing
```
- Adjust Letter Spacing for Responsive Headlines
```
fluid-type-scale
```
- Use a Responsive Type Scale

```
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. Navigation Patterns (MEDIUM-HIGH)

5. 导航模式（中高）

```
nav-horizontal-to-hamburger
```
- Collapse Horizontal Nav to Hamburger on Mobile
```
nav-tab-bar-mobile
```
- Use Bottom Tab Bar for Primary Mobile Navigation
```
nav-breadcrumb-collapse
```
- Truncate Breadcrumbs on Mobile
```
nav-sidebar-drawer
```
- Convert Sidebar Nav to Off-Canvas Drawer on Mobile
```
nav-dropdown-to-fullscreen
```
- Expand Dropdown Menus to Full-Width on Mobile
```
nav-sticky-header-compact
```
- Compact the Header on Scroll for Mobile

```
nav-horizontal-to-hamburger
```
- 移动端将水平导航折叠为汉堡菜单
```
nav-tab-bar-mobile
```
- 移动端使用底部标签栏作为主导航
```
nav-breadcrumb-collapse
```
- 移动端截断面包屑导航
```
nav-sidebar-drawer
```
- 移动端将侧边栏导航转换为侧滑抽屉
```
nav-dropdown-to-fullscreen
```
- 移动端将下拉菜单展开为全屏样式
```
nav-sticky-header-compact
```
- 移动端滚动时收缩头部导航

6. Touch & Interaction (MEDIUM)

6. 触摸与交互（中）

```
touch-min-touch-target
```
- Ensure Minimum 44px Touch Targets on Mobile
```
touch-hover-to-tap
```
- Replace Hover Interactions with Tap-Friendly Alternatives
```
touch-swipe-affordance
```
- Add Visual Swipe Affordances for Horizontal Scrolling
```
touch-scroll-snap-mobile
```
- Use Scroll Snap for Carousel-Like Mobile Interfaces
```
touch-input-sizing-mobile
```
- Size Form Inputs to Prevent iOS Zoom
```
touch-focus-visible-touch
```
- Use focus-visible for Touch-Friendly Focus Styles

```
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. Responsive Media (MEDIUM)

7. 响应式媒体（中）

```
rmedia-responsive-images
```
- Use Responsive Image Sizing with Object-Fit
```
rmedia-video-aspect-ratio
```
- Maintain Video Aspect Ratio Across Breakpoints
```
rmedia-icon-size-scaling
```
- Scale Icons Per Breakpoint, Not with Font Size
```
rmedia-avatar-responsive
```
- Scale Avatar Sizes Per Context and Breakpoint
```
rmedia-background-image-bp
```
- Swap Background Images at Breakpoints
```
rmedia-embed-responsive
```
- Make Embedded Content Responsive with Container Constraints

```
rmedia-responsive-images
```
- 使用Object-Fit实现响应式图片尺寸适配
```
rmedia-video-aspect-ratio
```
- 确保视频在各断点下保持宽高比
```
rmedia-icon-size-scaling
```
- 为每个断点单独缩放图标尺寸，而非随字体大小调整
```
rmedia-avatar-responsive
```
- 根据场景和断点调整头像尺寸
```
rmedia-background-image-bp
```
- 在断点处切换背景图片
```
rmedia-embed-responsive
```
- 通过容器约束实现嵌入式内容的响应式适配

8. Data Adaptation (LOW-MEDIUM)

8. 数据适配（中低）

```
data-table-to-cards
```
- Transform Tables to Cards on Mobile
```
data-horizontal-scroll-table
```
- Use Horizontal Scroll for Dense Data Tables
```
data-responsive-data-grid
```
- Adapt Data Grid Density for Screen Size
```
data-list-density-mobile
```
- Increase List Item Density on Mobile
```
data-truncate-overflow
```
- Truncate Overflowing Text on Mobile
```
data-responsive-form-layout
```
- Stack Form Fields on Mobile, Use Grid on Desktop

```
data-table-to-cards
```
- 移动端将表格转换为卡片布局
```
data-horizontal-scroll-table
```
- 为密集型数据表格使用水平滚动
```
data-responsive-data-grid
```
- 根据屏幕尺寸调整数据网格密度
```
data-list-density-mobile
```
- 移动端提升列表项密度
```
data-truncate-overflow
```
- 移动端截断溢出文本
```
data-responsive-form-layout
```
- 移动端采用堆叠表单字段，桌面端采用网格布局

How to Use

使用方法

Read individual reference files for detailed explanations and code examples:

Section definitions - Category structure and impact levels
Rule template - Template for adding new rules

阅读单个参考文件获取详细说明与代码示例：

类别定义 - 类别结构与影响等级说明
规则模板 - 添加新规则的模板

Reference Files

参考文件

File	Description
references/_sections.md	Category definitions and ordering
assets/templates/_template.md	Template for new rules
metadata.json	Version and reference information

文件	描述
references/_sections.md	类别定义与排序说明
assets/templates/_template.md	新规则模板
metadata.json	版本与参考信息