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

• bp-debug-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

• layout-fixed-to-relative

• Replace Fixed Positioning with Relative on Mobile

• layout-aspect-ratio-containers

• Use Aspect Ratio for Responsive Containers

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

• rspac-container-padding

• 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

• fluid-type-scale

• 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

• nav-sticky-header-compact

• 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

• touch-focus-visible-touch

• 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

• rmedia-embed-responsive

• 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

• data-responsive-form-layout

• 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