Override breakpoints rem does not work

[impetoyt]

• Tailwind v4.1.15: https://play.tailwindcss.com/
• Chrome
• Windows

In the Tailwind playground https://play.tailwindcss.com/, I entered this HTML code for testing:

<div class="@container">
  <div class="flex-initial @lg:w-[50%] @md:w-[66.6667%] notBuilder p-[0.5rem] relative @sm:w-[100%] w-[100%] @xl:w-[50%]">CONTAINER
  </div>
</div>

<div>
  <div class="flex-initial lg:w-[50%] md:w-[66.6667%] notBuilder p-[0.5rem] relative sm:w-[100%] w-[100%] xl:w-[50%]">WITHOUT
  </div>
</div>

CSS:

@import "tailwindcss";

:root {
  font-size: 18px; 
}

@theme {
  --breakpoint-sm: 41rem;
  --breakpoint-md: 49rem;
  --breakpoint-lg: 65rem;
  --breakpoint-xl: 81rem;
  --breakpoint-2xl: 97rem;
  --container-sm: 41rem;
  --container-md: 49rem;
  --container-lg: 65rem;
  --container-xl: 81rem;
  --container-2xl: 97rem;
}

All the breakpoints are correctly overridden. In the case of the container, it is calculated correctly by multiplying by 18px, while in the case of the classic breakpoints, it is still multiplied by 16px despite the font-size setting of 18px. If I use other tailwind class like text-sm and so on, it is correctly multiplying by 18px.

[wongjn]

This is because of the CSS specification of media queries and not anything within Tailwind CSS:

Relative length units in media queries are based on the initial value, which means that units are never based on results of declarations. For example, in HTML, the em unit is relative to the initial value of font-size, defined by the user agent or the user’s preferences, not any styling on the page.

So, rem units in @media will always be the user preference font size from the browser, not any CSS declaration override (i.e. your :root rule). Thus, it resolves to the default 16px.

I could see one reason this was done, to avoid infinite loops:

@media (min-width: 100rem) {
  :root {
    font-size: 20px;
  }
}

If you had a viewport that was say, 1600px wide, it would pass the media query (100rem × 16 = 1600px). However, if the :root rule was taken into account, then, 100rem × 20px = 2000px and the rule no longer matches so it would stop applying. Then you are back to step 1 where it did pass. And this would happen endlessly.

[KaloudasDev]

Hello! This behavior is actually correct according to CSS specifications, not a Tailwind CSS issue. As @wongjn correctly explained, media queries always use the browser's base font size (typically 16px) regardless of CSS :root font-size declarations.

CSS Specification Behavior:

• Media query rem units use the browser's default font size (16px)
• Element rem units use the CSS-specified :root font size (18px in your case)
• This prevents circular dependencies and infinite loops in CSS

Solution: Use Pixel Values for Breakpoints

@import "tailwindcss";

:root {
  font-size: 18px; /* Affects element sizing */
}

@theme {
  /* Use pixel values for media queries */
  --breakpoint-sm: 656px;  /* 41rem × 16px */
  --breakpoint-md: 784px;  /* 49rem × 16px */
  --breakpoint-lg: 1040px; /* 65rem × 16px */
  --breakpoint-xl: 1296px; /* 81rem × 16px */
  --breakpoint-2xl: 1552px; /* 97rem × 16px */
  
  /* Container queries can use rem since they're element-relative */
  --container-sm: 41rem;
  --container-md: 49rem;
  --container-lg: 65rem;
  --container-xl: 81rem;
  --container-2xl: 97rem;
}

Alternative: CSS Custom Properties with calc()

@import "tailwindcss";

:root {
  --base-font-size: 18px;
  font-size: var(--base-font-size);
}

@theme {
  /* Convert rem to pixels manually */
  --breakpoint-sm: calc(41 * 16px);
  --breakpoint-md: calc(49 * 16px);
  --breakpoint-lg: calc(65 * 16px);
  --breakpoint-xl: calc(81 * 16px);
  --breakpoint-2xl: calc(97 * 16px);
}

Why This Happens:

• @container queries use element-relative units (respect your 18px)
• @media queries use browser-default units (ignore your 18px)
• This maintains CSS consistency and prevents rendering conflicts

The solution is to explicitly use pixel values for media query breakpoints while keeping rem units for container queries and element sizing.

[impetoyt]

your solution with --breakpoint-sm: calc(41 * 16px); dosn't work.

[impetoyt]

@import "tailwindcss";

:root {
  --font-size: 18px;
  --bp-sm: calc(41*var(--font-size));
}

@theme {
  --breakpoint-sm: var(--bp-sm);
}

I tried this work aroung but it dosn't work. Any idea?