Breakpoint Visualization in Chrome DevTools Fails with Range Media Query Syntax

[Kareem-AEz]

I’ve noticed that when using the new CSS Media Query range syntax in Tailwind—such as:

@media (width >= 48rem /* 768px */) {
  /* CSS rules */
}

Example of used code:

md:grid-cols-2 lg:grid-cols-3

the usual visual breakpoint markers in Chrome DevTools do not appear:

In contrast, when using the traditional syntax like:

@media (min-width: 48rem) {
  /* CSS rules */
}

Do Chrome DevTools breakpoint visualization display the breakpoints even when the new range syntax is used.

Actual Behavior:
When using the new range syntax ((width >= 48rem)), the media query breakpoints do not appear in Chrome DevTools. This makes it difficult to visually debug responsive behavior in projects that adopt the new syntax.

Additional Notes:

• I’m aware this might be a limitation or bug in Chrome DevTools, but since Tailwind now outputs the new syntax, it would be helpful either to have guidance in the docs or some workaround.
• Environment details:
  • Tailwind CSS version: 4.0
  • Chrome version: 132.0.6834.160