tailwindcss-mobile-first

Responsive layouts that behave well on phones are the focus here, applying mobile-first patterns with Tailwind CSS v4. The guiding method is to style the mobile baseline with unprefixed utilities and then progressively enhance for larger screens using the sm:, md:, lg:, xl:, and 2xl: breakpoint prefixes, which apply at that breakpoint and above. It activates for a wide range of responsive tasks: breakpoint-based layout, responsive typography such as text-base sm:text-lg lg:text-xl, responsive grids and flexbox, showing and hiding elements across breakpoints (hidden md:block), desktop-down overrides via max-* variants, container queries, safe-area insets, orientation, and touch versus hover handling.

The core workflow is a short set of principles. Start unprefixed for mobile, then layer breakpoints. Choose breakpoints from content needs rather than device names, overriding Tailwind v4 theme breakpoints only when the design system demands it. Use fluid typography and spacing with clamp() for smoother scaling while preserving accessibility through a rem plus vw formula. Make interactive elements touch-safe with roughly 44px targets, adequate spacing, and clear labels. Use container queries so reusable components respond to their own width instead of the viewport, and reserve media dimensions with aspect-ratio utilities while applying safe-area utilities for notched devices and fixed mobile UI.

A set of gotchas keeps implementations honest: unprefixed classes apply at every size; ordering classes desktop-first does not actually make a design desktop-first but obscures intent; hover-only interactions fail on touch devices and should be paired with focus, active, or explicit controls; images and videos without reserved aspect ratios cause cumulative layout shift; and fixed bottom navigation must account for safe-area insets plus content padding to avoid overlap. A companion complete guide reference covers philosophy, breakpoints, fluid type and spacing, touch targets, container queries, layouts, responsive images and typography, navigation, safe areas, performance, testing, and responsive video in depth.