principlecsstailwindModerate

Tailwind is mobile-first: unprefixed classes set the base, breakpoints override upward

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

mobile firstresponsivebreakpointsmin-widthsm md lg xl

Problem

Developers coming from desktop-first CSS frameworks apply breakpoint prefixes to hide/show elements on mobile, resulting in classes like md:hidden expecting it to hide on desktop — but it actually hides on medium screens and above.

Solution

Think mobile-first: write the base style for the smallest screen, then override at larger breakpoints.

<!-- WRONG mental model (desktop-first thinking) -->
<div class="flex md:block"><!-- expects block on mobile, flex on desktop -->
  <!-- actually: flex on all, then block on md+ -->
</div>

<!-- CORRECT mobile-first approach -->
<div class="block md:flex">
  <!-- block on mobile, flex on md and above -->
</div>

<!-- Hiding elements -->
<div class="hidden md:block">Desktop only</div>
<div class="block md:hidden">Mobile only</div>

Default breakpoints: sm=640px, md=768px, lg=1024px, xl=1280px, 2xl=1536px.

Why

Tailwind breakpoints use min-width media queries. md:flex means @media (min-width: 768px) { display: flex }. Without a prefix, the rule applies at all screen sizes.

Gotchas

There is no xs: prefix by default — the unprefixed class IS the extra-small (mobile) style.
You cannot target ONLY the md breakpoint without also affecting lg, xl, etc. Use md:X lg:Y to override at each step.
max-width variants exist in v3.2+ as max-md:hidden for desktop-first use cases if needed.

Context

When building responsive layouts with Tailwind for the first time.

Revisions (0)

No revisions yet.