Tailwind v4 desktop-first breakpoint basically broken???

[madasebrof]

So all of our TW3 code uses webflow-like breakpoints, e.g. desktop fist, then you add tablet tweaks, then you add mobile tweaks. (Honestly, much easier to design this way, IMO). In TW3, this was awesome. You just add:

  		screens: {
  			tablet: {
  				max: '1001px'
  			},
  			phone: {
  				max: '501px'
  			}
  		},

to your theme, and all is good!

But in TW4--no such luck. It's all min, not max (e.g. mobile first only)

This seems like such a crazy flaw in the basic design of TW4. I spend hours today trying to find a workaround.

The summary is,

TW3 (old way):

/* Media queries at top level - higher specificity */
@media (max-width: 501px) {
  .phone\:flex-col {
    flex-direction: column;
  }
}

TW4 (new way):

/* Media queries nested inside utilities - lower in cascade */
.phone\:flex-col {
  @media (width <= 501px) {
    flex-direction: column;
  }
}

Has anyone figured out a workaround? I know I can use the weird @max-md:flex-col syntax, but this breaks everything and is super ugly.

Like I want to write this kind of thing--not rocket science. Use a flex-row, unless it's a phone, in which case use a flex-col

    <div className="flex flex-row items-center justify-start phone:flex-col">
      <div ...
      <div ...
    </div>

Any help would be greatly appreciated! (Sadly, I think it's a design flaw in TW4...)

[madasebrof]

Fixed issue, added pull request: #18917