AIniverse Get the App

tailwindcss-mobile-first

by josiahsiegel · Github

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.

Add tailwindcss-mobile-first to your agent in AIniverse

Discover more reusable skills, save them to your stack, get notified when new ones land.

Open in App · skills.sh

More agent skills

find-skills

Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is...

gstack-autoplan

Fully reviewed plan running CEO → design → eng review automatically.

android-agp-9-upgrade

Upgrades, or migrates, an Android project to use Android Gradle Plugin (AGP) version 9. Do not use this skill for mig...

gstack-benchmark

Baseline page load times, Core Web Vitals, and resource sizes.