tailwind-responsive-ui

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