Add ability to add max breakpoint (not just min breakpoints) to theme, e.g. --max-breakpoint-*

[madasebrof]

This is critical and am happy to write this code.

In TW3, you could just add:

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

to your theme and you were all set.

But in TW4, this is literally impossible to do. This code can no longer be made to work:

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

because of media query changes.

In English, the tw code above says "Make this div a flex-row, unless it's a phone, in which case, make it a flex-col"

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;
  }
}

Neither of these work:

@custom-variant phone (@media (width <= 501px));

@media (width <= 501px) {
  @custom-variant phone {
    @slot;
  }
}

Proposal:

Add a --max-breakpoint-* theme variable, which would work exactly like --breakpoint-*, but using (max) instead of (min).

That way, for folks like myself who design desktop-first, then tablet, then mobile, they can use their old TW3 code, instead of having to use the awkward @max-phone:flex-col syntax.

Sidebar: I know this is "set in stone", but let's be honest. Mobile-first sounds cool, but logically is very mentally taxing.

Because you have to think--"Ah, this screen is now BIGGER than sm, so I have to add an sm tag to account for a larger screen". Very confusing. Like literally, every time you look at responsive TW code, you invert your mental model. sm == big, etc.

As opposed to a phone breakpoint, you design your regular website using normal classes, e.g. flex flex-col, etc., then when you need to squeeze it onto a phone, you just add phone: tags to make it look pretty.

PS--I love tailwind!!!! Would love to contribute.,

[madasebrof]

Okay, I added a pull request for this feature!

#18917

Thanks!!!!!!!

[rozsazoltan]

You can currently do something like this:

• Defining breakpoints for a desktop-first approach using maximum values instead of minimum values

@custom-variant tablet (@media (max-width: 1001px));
@custom-variant phone (@media (max-width: 501px));

• https://play.tailwindcss.com/gop2AgzduC?size=500x720 - working
• https://play.tailwindcss.com/gop2AgzduC?size=502x720 - working
• https://play.tailwindcss.com/gop2AgzduC?size=1002x720 - working

It's important that in this case you declare the variants in descending order, as this ensures the utilities will be applied in the correct order. Here’s a bad example:

@custom-variant phone (@media (max-width: 501px)); /* not working */
@custom-variant tablet (@media (max-width: 1001px));

• https://play.tailwindcss.com/kbxDsWWRot?size=500x720 - not working by wrong utility order
• https://play.tailwindcss.com/kbxDsWWRot?size=502x720 - working
• https://play.tailwindcss.com/kbxDsWWRot?size=1002x720 - working

Just for fun, can declare something, like this:

@custom-variant example (@media (min-width: 1000px) and (max-width: 2000px)); /* activated between 1000px and 2000px */

[rozsazoltan]

If I want to stick with your example - and I don't want to shorten it to one line - then I need to start with @custom-variant, so it knows how to wrap the content of @slot. Inside the { }, it will be able to interpret everything correctly.

@custom-variant tablet {
  @media (width <= 1001px) {
    @slot;
  }
}

@custom-variant phone {
  @media (width <= 501px) {
    @slot;
  }
}

• https://play.tailwindcss.com/CxSLBFXqHs?size=500x720 - working
• https://play.tailwindcss.com/CxSLBFXqHs?size=502x720 - working
• https://play.tailwindcss.com/CxSLBFXqHs?size=1002x720 - working

Here are some other @custom-variant examples to help better understand how it works:

• Make Tailwind v4 desktop-first
• Readable cross-browser (webkit, moz) input slider styling using custom-variants
• How to can declare custom group-open variant for hamburger menu?

[rozsazoltan]

Or yeah just use max-{breakpoint}: variants; although I admit that typing the max- prefix over and over can be weird.

• Add support for --max-breakpoint-* theme variables #18917 (comment)
• https://tailwindcss.com/docs/responsive-design#targeting-a-breakpoint-range

@theme {
  --breakpoint-tablet: 1000px;
  --breakpoint-phone: 500px;
}

• https://play.tailwindcss.com/qePTaO3Pmt?size=500x720 - working
• https://play.tailwindcss.com/qePTaO3Pmt?size=502x720 - working
• https://play.tailwindcss.com/qePTaO3Pmt?size=1002x720 - working

[madasebrof]

@rozsazoltan Amazing--so I think I must be having some super odd VIte/TW4 thing going on or something... I just started with a default vite/tw4 install...

I spent hours messing with this yesterday, and yes, for sure I started with your suggestion, e.g.

@custom-variant tablet (@media (max-width: 1001px));
@custom-variant phone (@media (max-width: 501px));

Here is some simple, test html:

<div class="phone:bg-sky-500 tablet:bg-amber-500 bg-emerald-300">
  Hello World
      <div class="flex p-3 bg-yellow-300 flex-row phone:flex-col">
      <div class="h-5 bg-red-400 w-full"></div>
      <div class="h-5 bg-blue-400 w-full"></div>
    </div>
</div>

So, here's what I get in TW playground (works perfectly!!! OMG):

And here is what I get locally, in VIte/TW4:

Crazy, right?

Here is my code and config:

In my local VIte, the code shows up at the bottom of the cascade and it therefore not used:

In Tailwind Playground, it shows up at the top of the stack, and is therefore applied:

So I guess this is officially a TW/VIte bug??? Let me build it to see if it's just a preview issue...

Yeah, same thing in dist code...

Okay, so yeah the layer utilities are getting the order correct:

But there is an "upper" css that is overriding those layer utilities:

I'll do some more digging to see if I can sort out the layer utilities thing...

[rozsazoltan]

Hmm, thats strange, I'll test it myself in a moment

[madasebrof]

OMG. Just realized I had a <script src="https://cdn.tailwindcss.com"></script> lurking in my index.html!!! (was loading TW3 as well, which was injecting css after TW4) Literally a day to fix.

Thanks so much for your help!!!!!!!!

It's usually the simple things...

[madasebrof]

All good, no need to add this...

custom-variants FTW

@import "tailwindcss";

@source "./**/*.html";
@source "./src/**/*.{js,ts,jsx,tsx}";

@custom-variant tablet (@media (max-width: 1001px));
@custom-variant phone (@media (max-width: 501px));