pproenca 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 Directionbp-content-driven-breakpoints- Set Breakpoints Where Content Breaksbp-avoid-device-widths- Avoid Device-Specific Breakpoint Valuesbp-consolidate-breakpoints- Consolidate Breakpoints to Three or Fourbp-min-width-over-max- Use min-width Over max-width for Breakpointsbp-debug-breakpoints- Use Visual Breakpoint Indicators During Development
2. Layout Transformation (CRITICAL)
layout-stack-to-row- Stack Elements on Mobile, Row on Desktoplayout-sidebar-collapse- Collapse Sidebar to Top or Bottom on Mobilelayout-grid-column-reduction- Reduce Grid Columns at Narrower Breakpointslayout-holy-grail-responsive- Use Responsive Holy Grail Layout with Gridlayout-sticky-to-static- Convert Sticky Elements to Static on Mobilelayout-fixed-to-relative- Replace Fixed Positioning with Relative on Mobilelayout-aspect-ratio-containers- Use Aspect Ratio for Responsive Containers
3. Responsive Spacing (HIGH)
rspac-scale-padding-per-bp- Scale Padding Independently Per Breakpointrspac-responsive-gap- Use Responsive Gap for Grid and Flex Spacingrspac-compact-mobile-generous-desktop- Use Compact Spacing on Mobile, Generous on Desktoprspac-section-spacing- Scale Section Dividers with Viewportrspac-inline-to-stack-spacing- Convert Inline Spacing to Stack Spacing on Mobilerspac-container-padding- Use Responsive Container Padding
4. Fluid Typography (HIGH)
fluid-clamp-font-size- Use clamp() for Fluid Font Sizingfluid-responsive-line-height- Tighten Line Height as Font Size Increasesfluid-responsive-measure- Constrain Line Length to 45-75 Charactersfluid-scale-headings-independently- Scale Heading Sizes Independently Across Breakpointsfluid-responsive-letter-spacing- Adjust Letter Spacing for Responsive Headlinesfluid-type-scale- Use a Responsive Type Scale
5. Navigation Patterns (MEDIUM-HIGH)
nav-horizontal-to-hamburger- Collapse Horizontal Nav to Hamburger on Mobilenav-tab-bar-mobile- Use Bottom Tab Bar for Primary Mobile Navigationnav-breadcrumb-collapse- Truncate Breadcrumbs on Mobilenav-sidebar-drawer- Convert Sidebar Nav to Off-Canvas Drawer on Mobilenav-dropdown-to-fullscreen- Expand Dropdown Menus to Full-Width on Mobilenav-sticky-header-compact- Compact the Header on Scroll for Mobile
6. Touch & Interaction (MEDIUM)
touch-min-touch-target- Ensure Minimum 44px Touch Targets on Mobiletouch-hover-to-tap- Replace Hover Interactions with Tap-Friendly Alternativestouch-swipe-affordance- Add Visual Swipe Affordances for Horizontal Scrollingtouch-scroll-snap-mobile- Use Scroll Snap for Carousel-Like Mobile Interfacestouch-input-sizing-mobile- Size Form Inputs to Prevent iOS Zoomtouch-focus-visible-touch- Use focus-visible for Touch-Friendly Focus Styles
7. Responsive Media (MEDIUM)
rmedia-responsive-images- Use Responsive Image Sizing with Object-Fitrmedia-video-aspect-ratio- Maintain Video Aspect Ratio Across Breakpointsrmedia-icon-size-scaling- Scale Icons Per Breakpoint, Not with Font Sizermedia-avatar-responsive- Scale Avatar Sizes Per Context and Breakpointrmedia-background-image-bp- Swap Background Images at Breakpointsrmedia-embed-responsive- Make Embedded Content Responsive with Container Constraints
8. Data Adaptation (LOW-MEDIUM)
data-table-to-cards- Transform Tables to Cards on Mobiledata-horizontal-scroll-table- Use Horizontal Scroll for Dense Data Tablesdata-responsive-data-grid- Adapt Data Grid Density for Screen Sizedata-list-density-mobile- Increase List Item Density on Mobiledata-truncate-overflow- Truncate Overflowing Text on Mobiledata-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 |