[Feature Request/Discussion] @screen to create max-width and min-width rules on demand

[hacknug]

I have a project with two breakpoints declared like this (mobile first, min-width media queries) and I need to create a couple CSS rules the only apply when using those same values but instead on a max-width media query.

screens: {
  'm': '768px',
  'l': '1366px'
},

Is there any way to effectively do this using the advanced screen options? I don't mind writing custom CSS for this but I still think it'd be more convenient if Tailwind could provide a way to do it out the box. Ideally I would also be able to use the breakpoints/screens declared on my config file and create this prefixed/suffixed classes that would @apply.

Maybe this should be done by allowing users to add screens that don't generate classes outside when used Tailwind's utilities.

Somewhat related to #313.

[adamwathan]

Can you share the code you wish you could write? I'm not sure I can fully understand what you want to be able to do without seeing an example.

[hacknug]

Let me try once again.

As I said, in my tailwind config file I have this two screens:

screens: {
  'm': '768px',
  'l': '1366px'
}

As mentioned in #189, I use .clip to hide elements that I need to be accessible to screen readers.

@responsive {
  .clip {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
  }
}

This works great when I need to hide things upwards (min-width, mobile first breakpoints). The problem is some of this elements I only need them hidden in smaller breakpoints. For that I write some more CSS.

@media (max-width: 767px) {
  .m\:clip-not { @apply .clip; }
}

@media (max-width: 1365px) {
  .l\:clip-not { @apply .clip; }
}

This works fine but I'd like to be able to use Tailwind to do this in a similar way to how the @responsive rule works . In this case it would use those values in screens and write media queries using max-width instead.

The problem with this would be that by using the very same values, browsers would apply those styles in that exact window width which is not what I'd want. A solution for this would be to use those values -1px.

An even bigger problem would show up if doing this since not everyone is using pixels for their media queries. So Tailwind then should be able to turn this other units into pixels which is kinda impossible if we consider not everyone will set their base font-size to 16px.

Just to make things even worst, I've also needed to write this kind of rules:

@media (min-width: 1366px) {
  .group:hover .l\:group-hover\:clip { @apply .clip; }
  #main-nav ul li:not(:hover) ul { @apply .clip; }
}

It would be great to be able to do this kinds of things with Tailwind but I understand this is probably too much. Just opened the issue because I was curious to know if anyone ever tried doing such thing or if it would be possible.

[hacknug]

Closing this as I've been able to survive without it and would be too complicated to implement given all the possible units that could be used in those media-queries.