tailwindcss-responsive_skill

Overview

This skill helps agents design and implement responsive layouts using breakpoint utilities, container queries, and mobile-first patterns inspired by Tailwind CSS. It provides clear conventions for default breakpoints, an easy path to custom breakpoints, and examples for container-based responsiveness. Use it to convert design intent into scalable, maintenance-friendly CSS classes and patterns.

How this skill works

The skill documents default breakpoint tokens (sm, md, lg, xl, 2xl) mapped to rem and pixel values and shows the corresponding media query behavior. It explains how to declare custom breakpoints in theme variables and how to apply container queries so elements respond to their container size rather than the viewport. It also demonstrates mobile-first class composition where base styles are defined first and augmented at larger breakpoints.

When to use it

• Building responsive UIs that scale across common screen sizes (mobile to large desktop).
• Implementing container-aware components that adapt to parent size rather than viewport.
• Converting designs into utility-class patterns for consistent breakpoints.
• Adding a custom large breakpoint beyond defaults for very wide layouts.
• Creating predictable typography scaling using mobile-first classes.

Best practices

• Favor mobile-first classes: define base styles, then layer md:, lg: modifiers for larger sizes.
• Use the documented breakpoint tokens to keep consistency across the app.
• Prefer container queries for component-level responsiveness to improve modularity.
• Declare custom breakpoints in theme variables and reference them with a clear naming convention.
• Test layouts across breakpoint ranges and inside containers to validate behavior.

Example use cases

• A dashboard grid that adds columns at md and lg breakpoints: md:grid-cols-2 lg:grid-cols-3.
• A hero section with text sizes that scale: text-sm md:text-base lg:text-lg for readable typography.
• A reusable card component that adapts using @container and @md:@lg grid utilities for side-by-side layouts.
• Adding 3xl support by defining --breakpoint-3xl in the theme for ultra-wide monitors.
• Switching a single-column layout on mobile to a multi-column layout on larger breakpoints.