Tailwindcss Mobile First
This is the mobile-first Tailwind reference you'll want open when you're building responsive layouts. It walks you through the complete 2025/2026 approach: fluid typography with clamp(), fluid spacing scales, proper touch target sizing for WCAG 2.2 compliance (44px minimum recommended), and container queries for component-level responsiveness. The breakpoint strategy is solid, emphasizing progressive enhancement over desktop-down approaches. What makes this genuinely useful is the practical coverage of modern concerns like safe-area insets for notched devices and proper touch versus hover state handling. If you're still writing md:text-lg before text-base, this will fix that habit fast.
- skills.sh installs
- 2.1K
- GitHub stars
- 61
- last updated
- Aug 21, 2026
Install
$ npx -y skills add josiahsiegel/claude-plugin-marketplace --skill tailwindcss-mobile-first --agent claude-codeInstalls into .claude/skills of the current project.
Files
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:, and2xl:. - 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 viarem + vw. - Make interactive elements touch-safe with 44px recommended targets, adequate spacing, clear labels, and mobile navigation patterns.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
More from josiahsiegel/claude-plugin-marketplace
All 26- Powershell Master1.1K
- Docker Best Practices944
- Git Master811
- Tailwindcss Advanced Design Systems657
- Docker Security Guide619
- Tailwindcss Responsive Darkmode478
- Bash Master462
- Context Master399
- Tailwindcss Fundamentals V4393
- Tailwindcss Accessibility299
- Tailwindcss Framework Integration296
- Sql Server 2025260
- Tailwindcss Advanced Components250
- Tailwindcss Performance237
- Opentofu Guide209
- Powershell Shell Detection209
- Tailwindcss Debugging207
- Tailwindcss Plugins202
- Windows Path Troubleshooting197
- Debugging Troubleshooting 2025196
- Ado Pipeline Best Practices180
- Parallel Processing Patterns180
- Docker 2025 Features178
- Tailwindcss Advanced Layouts8.2K
Recommended
More Frontend Development
migrate-nativewind-to-uniwinduni-stack/uniwindMigrate a React Native project from NativeWind to Uniwind. Use when the user wants to replace NativeWind with Uniwind, upgrade from NativeWind, switch to Uniwin2Kskills.sh installs
r3f-lightingenzed/r3f-skillsReact Three Fiber lighting - light types, shadows, Environment component, IBL. Use when adding lights, configuring shadows, setting up environment lighting, or 2Kskills.sh installs
odoo-19unclecatvn/agent-skillsOdoo 19 development knowledge base with 18 specialized guides covering Actions (ir.actions.*, cron jobs, server actions), Controllers (HTTP routing, endpoints, 2Kskills.sh installs
repomix-exploreryamadashy/repomixAnalyze or explore a codebase (remote or local repository) by packing it with the Repomix CLI, then reading and searching the generated output. Use when the use2Kskills.sh installs
flutter-devminimax-ai/skillsFlutter cross-platform development guide covering widget patterns, Riverpod/Bloc state management, GoRouter navigation, performance optimization, and platform-s2Kskills.sh installs
vercel-composition-patternssupabase/supabaseReact composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reus1.9Kskills.sh installs