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.
Install
npx skills add https://github.com/pproenca/dot-skills --skill tailwind-responsive-uiSKILL.md
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 |
Related skills
vercel-react-best-practicesvercel-labs751KReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.vercel-composition-patternsvercel-labs361KReact composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.vercel-react-view-transitionsvercel-labs135KGuide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions viewpick-ui-libraryemilkowalski124KPick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly invoked; it does not trigger on its own.