Tailwind CSS 响应式 UI 最佳实践指南 - 8大类别49条规则，重构UI与移动适配

tailwind-responsive-ui by pproenca/dot-skills

78 周安装量

86 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/pproenca/dot-skills --skill tailwind-responsive-ui

CSS 用户体验前端架构

🇨🇳中文介绍

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

基于 Adam Wathan 和 Steve Schoger 的《重构 UI》以及现代响应式设计模式的 Tailwind CSS 应用全面响应式改造指南。包含 8 个类别共 49 条规则，按影响优先级排序，以指导自动化重构和代码生成。

何时应用

在以下情况下参考这些指南：

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

按优先级划分的规则类别

优先级	类别	影响	前缀
1	断点策略	关键	`bp-`
2	布局转换	关键	`layout-`
3	响应式间距	高

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

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-fit 实现响应式图片大小
rmedia-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	版本和参考信息

🇺🇸English

Community Responsive UI Tailwind CSS Best Practices

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.

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

Rule Categories by Priority

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-`

Quick Reference

1. Breakpoint Strategy (CRITICAL)

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
- Use Visual Breakpoint Indicators During Development

2. Layout Transformation (CRITICAL)

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
- Replace Fixed Positioning with Relative on Mobile

3. Responsive Spacing (HIGH)

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
- Use Responsive Container Padding

4. Fluid Typography (HIGH)

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
- Use a Responsive Type Scale

5. Navigation Patterns (MEDIUM-HIGH)

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
- Compact the Header on Scroll for Mobile

6. Touch & Interaction (MEDIUM)

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
- Use focus-visible for Touch-Friendly Focus Styles

7. Responsive Media (MEDIUM)

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
- Make Embedded Content Responsive with Container Constraints

8. Data Adaptation (LOW-MEDIUM)

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
- Stack Form Fields on Mobile, Use Grid on Desktop

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

Weekly Installs

Repository

pproenca/dot-skills

GitHub Stars

First Seen

Feb 12, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

codex74

github-copilot73

gemini-cli73

kimi-cli72

opencode72

amp71

agentation - AI智能体可视化UI反馈工具，连接人眼与代码的桥梁

5,400 周安装

bp-debug-breakpoints

layout-fixed-to-relative

layout-aspect-ratio-containers - Use Aspect Ratio for Responsive Containers

rspac-container-padding

nav-sticky-header-compact

touch-focus-visible-touch

rmedia-embed-responsive

data-responsive-form-layout