tailwindcss-mobile-first

Q: How do I install tailwindcss-mobile-first?

Run npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace --skill tailwindcss-mobile-first in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/tailwindcss-mobile-first/ (personal) or .claude/skills/tailwindcss-mobile-first/ (project).

by josiahsiegelMobile

Mobile-first responsive design patterns with Tailwind CSS v4 (2025-2026). PROACTIVELY activate for: (1) mobile-first design with Tailwind breakpoints (sm:, md:, lg:, xl:, 2xl:), (2) responsive utility ordering (default = mobile, then breakpoints), (3) responsive typography (text-base sm:text-lg lg:text-xl), (4) responsive grids and flexbox, (5) hide/show across breakpoints (hidden md:block), (6) max- breakpoints for desktop-down overrides, (7) container queries (@container) for component-level responsiveness, (8) safe-area insets and notch handling, (9) landscape vs portrait orientation, (10) touch vs hover (hover: with @media). Provides: breakpoint reference, mobile-first patterns, container-query examples, safe-area recipes, and touch/hover handling.

Installs: 2.1K
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace --skill tailwindcss-mobile-first

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads tailwindcss-mobile-first automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Tailwind Mobile-First Skill

Use this skill for Tailwind CSS mobile-first responsive design: breakpoint strategy, fluid typography and spacing, touch targets, container queries, safe areas, responsive layouts, media, navigation, and mobile performance.

When to Use This Skill

Use when the user asks for tasks covered by the frontmatter triggers, especially implementation guidance, debugging, architecture choices, production hardening, or performance-sensitive decisions in this domain. Start from this orchestrator, then load the focused reference file that matches the requested detail level.

Core Workflow

Start with unprefixed utilities for the mobile baseline, then progressively enhance with sm:, md:, lg:, xl:, and 2xl:.
Choose breakpoints from content needs rather than device names; override Tailwind v4 theme breakpoints only when the design system requires it.
Use fluid typography and spacing with clamp() for smoother scaling between breakpoints while preserving accessibility via rem + vw.
Make interactive elements touch-safe with 44px recommended targets, adequate spacing, clear labels, and mobile navigation patterns.
Use container queries for reusable components that must respond to their own width instead of viewport width.
Reserve media dimensions with aspect-ratio utilities and use safe-area utilities for notched devices and fixed mobile UI.

Key Gotchas

Unprefixed Tailwind classes apply at every size; breakpoint-prefixed utilities apply at that breakpoint and above.
Ordering classes desktop-first does not make the design desktop-first, but it often obscures intent and increases bugs.
Hover-only interactions fail on touch devices; pair hover states with focus, active, or explicit controls.
Videos and images without reserved aspect ratios can cause Cumulative Layout Shift.
Fixed bottom navigation must account for safe-area insets and add content padding to avoid overlap.

Reference Map

references/mobile-first-complete-guide.md - Full original guide covering philosophy, breakpoints, fluid type/spacing, touch targets, container queries, layouts, responsive images/type, navigation, safe areas, mobile performance, testing, and responsive video patterns.

Response Guidance

Preserve the user's existing framework, library, and tooling choices unless there is a clear compatibility or performance reason to suggest an alternative.
Give copy-pasteable code only for the exact task at hand; otherwise point to the relevant reference section.
Call out tradeoffs, failure modes, and verification steps for production workflows.
Prefer accessible, maintainable, measurable solutions over clever micro-optimizations.

FAQ

What does the tailwindcss-mobile-first skill do?

How do I install tailwindcss-mobile-first?

Run npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace --skill tailwindcss-mobile-first in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/tailwindcss-mobile-first/ (personal) or .claude/skills/tailwindcss-mobile-first/ (project).

Which AI agents can use tailwindcss-mobile-first?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is tailwindcss-mobile-first safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains tailwindcss-mobile-first?

It is published by josiahsiegel in josiahsiegel/claude-plugin-marketplace. It has 2,092 recorded installs.