Reverse media queries option

[suiramdev]

At the moment, as far as I know, we can only make media requests that apply the following class if the screen size is larger than the given size.
I had the idea to add the opposite, by preceding the option with a negative sign: -md:justify-between

---

Solved
The feature now exist
https://tailwindcss.com/blog/tailwindcss-v3-2#max-width-and-dynamic-breakpoints

[simonswiss]

Hey!

You can completely customize how the media queries work in Tailwind CSS:

https://tailwindcss.com/docs/screens

The default is indeed to have "mobile-first", min-width breakpoints, but you can quite easily turn those into max-width breakpoints if you prefer working this way:

https://tailwindcss.com/docs/screens#max-width-breakpoints

You can't add a - at the start to invert the default breakpoints, but you can totally add a custom -md max-width breakpoint in your config file to achieve the exact same result!

And here's the demo:

https://play.tailwindcss.com/Jrnrq0Ob7I?file=config

Notice that for these breakpoints to override each other correctly, I have the widest breakpoint on top, and the narrowest at the bottom. This will ensure that -sm can override -xl, due to the order in which the styles will be generated.

Note: This is my personal opinion, but I don't suggest mixing min- and max- width breakpoints when styling a project, as it can get a bit confusing and conflicting. If you have a good reason to do it, by all means, go ahead, but I wouldn't start mixing both unless there is a specific reason to do so.

But, effectively, the way I create additional custom breakpoints in this Tailwind Play linked above gives you the exact functionality you where suggesting, where you can prefix your breakpoints with a -.

Have a read through the entire "Screens" page of the documentation – you can do some pretty cool stuff with these!

[rootical]

Spent several hours looking for how to do it! Has almost given up.
Why the 'key': {max: 'value'} is so hard to find in the docs and is it even over there? Should be in the Responsive Design Customization section... Anyway glad I've found it. Wasn't smart enough to check the types for config :/

[the94air]

I agree. I remember running into the same deal. The documentation around this could be improved.

[ADTC]

How do we do this in Tailwind 4 that's using on CSS variables for config now?

  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --breakpoint-2xl: 96rem;

These are automatically width >= (equivalent to min-width).

[jdockwarder]

I definitely see the point in this idea. I would support the idea of making this a standard feature in tailwind to decrease the configuration effort. Are there any features interfering with the concept of generate -BREAKPOINT variants by default?

[suiramdev]

I think both views are correct. On the one hand, I agree with you, indeed, it could be tricky and we may be in the minority to ask for this change.
I thought it would be cool to have it by default, instead of having to configure it on every project.
It's not a personal configuration, but a choice of project direction that everyone can have, unlike, say, a color code change.

[suiramdev]

As @dockwarder said:
You could make any rule with the tailwind configuration file. You wouldn't even need to develop it.
The reason it's good to develop them is that everyone needs them and it would reduce the size of people's configuration files.
So, this feature could.

[mrleblanc101]

@adamwathan Why couldn't this be in tailwindcss by default, why JIT mode it doesn't add any weight.
Sometime it's easier to scope you style to mobile only using -sm:absolute than to cancel it using absolute sm:static
Otherwise, could this be a built-in plugin ? So we don't have to copy paste this config in every tailwindcss project ?

[the94air]

To add why this could be useful. I find this utility very helpful when I need to hide a background image on a smaller breakpoint. It's impossible to set this using the standard min-width breakpoints and you will have to either use a custom CSS code or add in negative breakpoints. And now that you can add a full URL to the background utility, this is no longer a big issue. It was when we had to inline the URL using style attributes. But yeah, I understand the reason why this shouldn't be added to the default configs and I kind of agree with it. But it could be a nice addition to deal with these cases setting background images. I am also sure there are some special CSS properties that also suffer from the same limitation but I can't remember them at the moment.

[wongjn]

Since Tailwind v3.2, there are max-* variants out-of-the-box which fulfils this feature suggestion!

[kocoten1992]

Thanks for the idea of -xl, it a killer feature, It should be in tailwindcss I think.

[MaKTaiL]

I would love to have these options included in the official Tailwind as well. It's nice that we can customize it while it isn't official though.

[mrleblanc101]

#7645 (reply in thread)

[MaKTaiL]

Wow, I hadn't notice this. Thank you for the heads-up!

[SampsonCrowley]

I know this is an old thread but is there a good reason not to use: justify-between md:justify-around (hidden md:block, etc)? setting the value that it should be by default as the "less than md" option, and set what it should change to at "md and above"

[wongjn]

For what it's worth, it seems Tailwind advocates the strategy of having the value it should be by default and then setting what it should change to at md and above, i.e. mobile-first.

[nicolasrenon]

Sometimes you can't do that. For example, align-items's default value is normal, but Tailwind does not provide a class to set it back to normal.

[alianza]

I need this for setting ring-inset on a button in a small viewport, but there is no utility to enable something like ring-outset again. A reverse viewport would fix this!

[adamwathan]

We’ve had this feature for almost two years! 🙂

https://tailwindcss.com/blog/tailwindcss-v3-2#max-width-and-dynamic-breakpoints