Feature Proposal - @responsive max-width

[gofish543]

I did some reading and this feature does not appear to be present within the most recent versions of tailwind.

What would be nice is if there was a way to do

@responsive-max {
    .display {
        display: none;
    }
}

Which would yield...

@media (max-width: 576px) {
    .sm\:display {
        display: none;
    }
}

@media (max-width: 768px) {
    .md\:display {
        display: none;
    }
}

@media (max-width: 992px) {
    .lg\:display {
        display: none;
    }
}

@media (max-width: 1200px) {
    .xl\:display {
        display: none;
    }
}

[hacknug]

Duplicate of #355

Also, the problem with using the same value for max-width is that you'd have overlapping between breakpoints. This is pretty easy to fix with pixel breakpoints but not as straightforward when it comes to other units.

[adamwathan]

@gofish543 So you can actually already create max-width based breakpoints:

https://tailwindcss.com/docs/responsive-design/#advanced-screens

If you wanted min-width and max-width you'd just need to come up with names for them. Similar discussion here:

tailwindlabs/discuss#139

[gofish543]

@adamwathan I should’ve looked at the documentation a little bit more. I apologize.

Thanks for the help!