Tailwind Responsive Ui

If you're building Tailwind interfaces that need to work across devices, this gives you 49 prioritized rules organized into breakpoint strategy, layout transforms, spacing, typography, navigation, touch targets, media handling, and data tables. It's based on Refactoring UI and assumes mobile-first workflows. The critical stuff (breakpoints, layout) comes first, lower-impact patterns (data adaptation) last, which is helpful when you're triaging responsive issues or generating code that needs to scale gracefully. Each rule links to detailed references with examples. Most useful when refactoring desktop-only UIs or reviewing responsive implementations for common mistakes like max-width breakpoints or undersized touch targets.

skills.sh installs: 470
GitHub stars: 222
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add pproenca/dot-skills --skill tailwind-responsive-ui --agent claude-code

Installs into .claude/skills of the current project.

Files

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-`