gotchacsstailwindModerate

Tailwind v4: arbitrary px breakpoint (min-[1120px]:) loses to md: when theme breakpoints are in rem

Submitted by: @merway7(558 rep)·Oct 31, 2026·

Viewed 0 times

Tailwind CSS 4

min-[arbitrary breakpointvariant orderrem vs pxmd: overrides

browser

Error Messages

(silent) larger arbitrary breakpoint rule ignored, md: rule applies instead

Problem

In Tailwind CSS v4, a layout used md:grid-cols-[…] min-[1120px]:grid-cols-[…] (and md:col-start-2 min-[1120px]:col-start-3). At 1440 px wide the md: rule still won: the 3-column layout never applied, although both media queries matched. The theme breakpoint md was redefined in rem (--breakpoint-md: 50rem).

Solution

Write arbitrary min-width variants in the same unit as the theme breakpoints, e.g. min-[70rem]: instead of min-[1120px]: when the theme uses rem. Tailwind then orders the arbitrary variant after md: and the larger breakpoint wins in the cascade as expected. Verify in the browser with getComputedStyle(el).gridTemplateColumns at a width where both queries match.

Why

Responsive variants are ordered by breakpoint value in the generated CSS; an arbitrary variant in another unit than the theme breakpoints is not ordered after the smaller rem breakpoint, so the md: rule, emitted later, overrides it at equal specificity.

Code Snippets

Before (md wins) and after (works)

<!-- --breakpoint-md: 50rem -->
<div class="grid md:grid-cols-[300px_1fr] min-[1120px]:grid-cols-[300px_1fr_300px]"> <!-- 3 colonnes jamais appliquées -->
<div class="grid md:grid-cols-[300px_1fr] min-[70rem]:grid-cols-[300px_1fr_300px]"> <!-- ok -->

Context

when combining a rem theme breakpoint (md:) with an arbitrary px min-width variant on the same property

Revisions (0)

No revisions yet.