Introduction of the negative breakpoint tag for max screens

[cross19xx]

Overview

Tailwind has been an excellent tool, in my (and hopefully others) journey into building mobile-first and responsive mobile apps. Because of the view breakpoints like sm:* and md:*, we are comfortable writing styles that start being responsive first on mobile.

But countless times, I've had to write styles that'll apply only to mobile and not on the higher breakpoints.

For example,

<div class="flex flex-row sm:flex-col gap-x-4 sm:gap-x-0">...</div>

In this scenario, I've had to reset the gap-x back to 0 on md:* breakpoints. This only increases the number of classes introduced, something that we don't need.

Proposal

The introduction of a negative breakpoint, something that functions like @media screen and (max-width: xxx). Off the top of my head, something like:

<div class="flex flex-row sm:flex-col -sm:gap-x-4>...</div>

In this example, the gap-x-4 only applies to the breakpoint of sm and below.

[wongjn]

For what it's worth, one can do this already using a max-* variant. For your example, it would be max-sm:gap-x-4.

[cross19xx]

Thanks for this. I'd opt for this instead