Pixel equivalents are wrong in media queries when `rootFontSize` is not `16px`

[alexchexes]

System Information

• Tailwind CSS: v4.0.6
• Build Tool: Vite v6.0.11
• Node.js: v22.11.0
• Browser: Chrome v130.x
• Operating System: Windows 11 LTSC

Reproduction URL

GitHub Repository

---

Issue Description

With Tailwind CSS v4, breakpoints (e.g., sm, md, etc.) were switched to use rem instead of px. However, this causes inconsistencies because media queries in browsers do not respect a custom rootFontSize—leading to incorrect breakpoint calculations.

The Tailwind VS Code extension correctly calculates pixel equivalents based on the configured tailwindCSS.rootFontSize, but browsers always interpret 1rem = 16px in media queries, ignoring any custom font size settings.

---

Expected Behavior

If tailwindCSS.rootFontSize is set to 15px, the VS Code extension displays:

.sm\:bg-green-100 {
  @media (width >= 40rem /* 600px */) {
    background-color: var(--color-green-100);
  }
}

• The 40rem /* 600px */ part suggests that 1rem = 15px, which aligns with the expected base font size.

---

Actual Behavior

• Browsers do not respect rootFontSize in media queries and always interpret 1rem = 16px, meaning 40rem = 640px, not 600px.
• This leads to a situation where using rem for breakpoints is not only inconvenient but also functionally incorrect in media queries.

---

Steps to Reproduce

1. Set the base font size to 15px (either via addBase in Tailwind config or using plain CSS:

   html { font-size: 15px; }

2. Use a sm:bg-green-100 class in Tailwind.
3. Observe the Tailwind VS Code extension displaying:

   @media (width < 40rem /* 600px */) { flex-wrap: wrap; }

4. Check the actual media query behavior in a browser using DevTools:
   • The breakpoint still applies at 640px, not 600px, proving that browsers ignore the custom font size in media queries.

Screenshots

Incorrect calculations in the VS Code extension vs. actual browser behavior:

---

Proposed Fix

• Option A: The VS Code extension should always assume 1rem = 16px in media queries, regardless of tailwindCSS.rootFontSize, ensuring the correct pixel values (40rem = 640px, not 600px) are displayed.
• Option B: Revert breakpoints to use px instead of rem, as rem does not behave as expected in media queries.

[thecrypticace]

So rootFontSize is purely an IntelliSense tool and has no bearing on the actual CSS output or browser behavior. It's purprose is so users can tell IntelliSense what the root font size is (because we may not have the information available to detect it ourselves). We can then use that value to calculate rem values.

The correct solution here is to update IntelliSense. We should either:

• Disable them only if rootFontSize != 16px (my preference)
• Introduce a separate setting that allows users to set the "user agent" font size

… but browsers always interpret 1rem = 16px in media queries, ignoring any custom font size settings.

So this is maybe a bit obscure but this isn't actually correct. This is indeed the default behavior but rem values in media queries are based on the initial value of the font-size property and not the size defined on the html element. This is by design as the CSS spec states:

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 based media queries do respond dynamically based on font size — just not the one defined on the html element. I think some browsers may change this based on accessibility settings (but not 100% sure on this). However, you can change this yourself in the settings of some browsers. For example in Chrome you can go to Settings > Appearance > Font Size and change the default font size and 1rem in a media query will no longer equal 16px.

[alexchexes]

Okay. Thank you for not removing it! The pixel equivalent feature is very important, and without it, Tailwind wouldn't be as convenient to work with.

[thecrypticace]

Yeah that was @RobinMalfait's idea — just always use 16px in media queries which I think is reasonable.