-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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
Replacing screens media queries with raw key breaks container core plugin #1701
Comments
I'm not sure if I'm having a similar issue or if what I'm experiencing is expected and I just don't understand why, but when I enter in custom screens with Here's the code that generates it: I'm pretty sure this should be:
|
Can you provide an example of a complete custom raw config and what you would expect the container output to be given that config? That will help us understand what we should do, whether that be ignore the screen size or respect it using some more sophisticated intelligence than we use currently. |
@adamwathan thoughts on the line of code I shared above. Is that a typo? |
Not a typo, the container max-widths are derived from min-width breakpoints. If you can provide an example of your input and desired output I can give you a better response. |
It seems to me that if I passed in a an example config of: {
"screens": {
"minMax": { "min": "640px", "max": "767px" },
"maxOnly": { "max": "767px" }
}
} The output it produces skips the max end of the range on /* minMax */
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
/* maxOnly was not generated */ but I would expect that since I passed in a max, it would be: /* minMax */
@media (min-width: 640px) and (max-width: 767px) {
.container {
min-width: 640px;
max-width: 767px;
}
}
/* maxOnly */
@media (max-width: 767px) {
.container {
max-width: 767px;
}
} I apologize if I'm way off here - it's possible I'm too close to it and I've ended up in a rabbit hole. I've been including a workaround in my css that looks like this (values and variable names are just for this example): .container {
@screen minMax {
min-width: 640px;
max-width: 767px;
}
@screen maxOnly {
max-width: 767px;
}
} |
Since I hijacked this issue, I investigated @MartinMa's question and I think I see the issue: screens: {
lg: {
raw: '(min-width: 1280px) and (min-height: 768px)'
}
} I think it should be:
and it will produce: @media (min-width: (min-width: 1280px) and (min-height: 768px)) {
.container {
max-width: (min-width: 1280px) and (min-height: 768px);
}
} Plus all the @media (min-width: (min-width: 1280px) and (min-height: 768px)) {
.lg\:space-y-0 > :not(template) ~ :not(template) {
--space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--space-y-reverse)));
margin-bottom: calc(0px * var(--space-y-reverse));
}
... |
No plans to change any behavior here, the |
There's a doc about this. Is this older than the comment or newer? It's not working for me |
The documentation is about configuring |
Tailwind CSS offers preconfigured breakpoints for your project. Namely
sm
,md
,lg
andxl
. By default it takes into account the width property of the viewport, checking formin-width
.For example:
becomes
It is possible to overwrite the standard breakpoints in
tailwind.config.js
by providing own values for the min-width media query condition like this:You can even overwrite the rules completely with the raw key to provide your own customized condition as mentioned here.
For example:
However, this has a side effect on the container core plugin (maybe even other plugins, too).
The container core plugin intends to create style definitions for every
screens
breakpoint to limit the width of a container.By default it creates the following style definition for
xl
:However, this does not work anymore (rule is not created), when overwriting the breakpoint condition using the
raw
key as mentioned above. No rule for thelg
breakpoint is created for thecontainer
class.This is clear if you know how things interoperate with other parts of Tailwind CSS. For me it was unexpected and surprising.
I think to documentation should be adjusted accordingly. Explain that the container core plugin depends on the screens
min
key value and should always be provided alongside customraw
key values. What do you think?The text was updated successfully, but these errors were encountered: