-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Feature Request/Discussion] @screen to create max-width
and min-width
rules on demand
#355
Comments
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. |
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 @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 ( @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 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 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. |
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. |
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 amax-width
media query.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.
The text was updated successfully, but these errors were encountered: