skills.rest
alex-jordan547
alex-jordan547COMMUNITY
Explore all skills by this author →
GitHub

tailwindcss-mobile-first

Implements mobile-first responsive layouts with Tailwind CSS v4 breakpoints, fluid typography, and container queries.

Updated Jul 3, 2026
Search Tags:#accessibility#responsive design#mobile-first#tailwind css#breakpoints#fluid typography#container queries
One-click install
npx skills add https://github.com/alex-jordan547/agent-setup --skill tailwindcss-mobile-first-alex-jordan547
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwindcss-mobile-first
Source: https://github.com/alex-jordan547/agent-setup/tree/main/archive/tailwindcss-mobile-first
Command: npx skills add https://github.com/alex-jordan547/agent-setup --skill tailwindcss-mobile-first-alex-jordan547

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building responsive interfaces that work across phones, tablets, and desktops often leads to inconsistent breakpoints, unreadable text, and touch targets that fail accessibility standards. This Skill provides a complete set of mobile-first patterns for Tailwind CSS v4 so layouts scale correctly from 320px upward. ## Core Features & Use Cases - Breakpoint & Layout Systems: Content-driven breakpoint configuration, mobile-first grid and flexbox patterns, sidebar layouts, and holy-grail page structures. - Fluid Typography & Spacing: Clamp-based type and spacing scales that scale smoothly with the viewport while respecting user zoom preferences for WCAG compliance. - Touch & Accessibility Patterns: WCAG 2.2 compliant touch targets (44px minimum), safe-area handling for notched devices, and mobile navigation patterns including bottom nav bars. - Container Queries: Component-level responsiveness using @container so cards and widgets adapt to their parent rather than the viewport. - Use Case: When building a marketing page or dashboard, apply these patterns to get a responsive grid, fluid headings, compliant touch targets, and a mobile drawer navigation without writing custom media queries. ## Quick Start Use the tailwindcss-mobile-first skill to build a responsive landing page with fluid typography, a mobile hamburger menu, and WCAG-compliant touch targets.

Frequently Asked Questions about tailwindcss-mobile-first

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build mobile-first responsive layouts with Tailwind CSS?▼

Start with unprefixed utility classes for mobile, then add sm:, md:, and lg: prefixes to enhance at larger breakpoints. Unprefixed utilities apply to all screen sizes, and breakpoint prefixes apply at that width and above.

How to create fluid typography in Tailwind CSS v4?▼

Define custom text sizes in @theme using CSS clamp(), such as clamp(1rem, 0.9rem + 0.5vw, 1.125rem). Combining rem with vw keeps text scalable while respecting user zoom preferences for WCAG compliance.

What is the minimum touch target size for mobile accessibility?▼

WCAG 2.2 Level AA requires 24x24 CSS pixels minimum, but 44x44 pixels is the recommended size per Apple, Google, and Microsoft guidelines. In Tailwind, use min-h-11 min-w-11 to reach 44px.

When should I use container queries instead of media queries?▼

Use container queries for reusable components like cards, sidebar widgets, and embedded content that must adapt to their parent container. Use viewport media queries for page-level layouts, navigation bars, and full-width sections.

Does Tailwind CSS v4 support container queries?▼

Yes, via the @tailwindcss/container-queries plugin imported in your CSS. It provides @xs through @5xl container breakpoints and supports named containers like @container/sidebar for targeted component responsiveness.

How do I handle iPhone notch safe areas in Tailwind?▼

Define custom utilities with @utility that map padding to env(safe-area-inset-top) and related values. Apply them to fixed headers and bottom navigation bars so content is not obscured by notches or home indicators.

Related Skills

Explore More Software Engineering Skills→
ProjectEuropaProjectEuropa
4

tailwind-patterns

Create CSS-first Tailwind v4 design systems with @theme blocks and container queries.

Community
Intermediate
anouar1991anouar1991
1

responsive-design-tester

Audit web pages across six viewports for responsive design issues.

Community
Advanced
makerjackiemakerjackie
1

tailwind-design-system

Build Tailwind v4 design systems with CSS-first tokens and CVA components.

Community
Advanced
baasith6baasith6

converting-css-to-tailwind

Convert CSS selectors, properties, and rules to Tailwind CSS utility classes.

Community
Intermediate