Responsive UI transformation patterns for Tailwind CSS applications. This skill should be used when making interfaces responsive, refactoring layouts for multiple screen sizes, or reviewing responsive Tailwind code. Triggers on tasks involving breakpoint strategy, layout adaptation, responsive spacing, fluid typography, mobile navigation, touch interaction, responsive media, or data table responsiveness.
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.
Reference these guidelines when:
| 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-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 Developmentlayout-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 Containersrspac-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 Paddingfluid-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 Scalenav-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 Mobiletouch-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 Stylesrmedia-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 Constraintsdata-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 DesktopRead individual reference files for detailed explanations and code examples:
| File | Description |
|---|---|
| references/_sections.md | Category definitions and ordering |
| assets/templates/_template.md | Template for new rules |
| metadata.json | Version and reference information |