Feature Request: Extend the functionality of @screen

[samtrion]

We are currently facing the problem that we need some selectors only in specific viewports. Currently we solve this by using additional viewports in the configuration like "sm-only": { "min": "576px", "max": "767.98px" }, but this is a very dirty solution. Since we now already have over 13 viewports instead of the regular 5 viewports.

With a CSS compliant syntax extension, it would be possible to work much cleaner here and especially to place specific selectors individually.

Here is an example for the respective use cases. The following screen configuration always serves as a starting point.

screens: {
    "xs": "0", // Merely to define the term. If the value is zero, this is considered the default viewport.
    "sm": "576px",
    "md": "768px",
    "lg": "992px",
    "xl": "1200px"
},

The line @screen only(sm) corresponds to the following media query

@media (min-width: 576px) and (max-width: 767.98px) {

}

Further syntax extensions could be

• @screen between(sm, md) equals @media (min-width: 576px) and (max-width: 991.98px)
• @screen up-to(sm) equals @media (max-width: 767.98px)

I think this could also fix some of the Tailwindcss internal problems. Like overwriting .container size with identical values. By falling back on the own internal mode instead of defining the media query itself.

If a PR for this is welcome, I would look into this further.

[Duanen]

Thanks for the information keep sharing such informative post keep suggesting such post.

mymilestonecard