You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
As title says, any additional media queries such as hover:hover or min-aspect-ratio: 1 will prevent the auto-generation of the max-* classes, which makes sense as you can't have a max hover, but I feel they should still generate for those where it applies, or we should at least get a warning when generated unsuccessfully. This leads to styling not being applied for max breakpoints, and no way for the dev to know unless it's visually noticeable in the browser.
As I had trouble figuring out where the max-* classes were defined while trying to identify the bug, once I remembered that they were auto-generated (tucked away in the docs here), I just explicitly defined these in the config as well. It's easier, then, to trace for any other devs unfamiliar with TW.
{
sm: '400px',
md: '612px',
lg: '768px',
xl: '1024px',
'max-sm': { max: '399px'},
'max-md': { max: '611px'},
'max-lg': { max: '767px'},
'max-xl': { max: '1023px'},
// This now has no impact on the max-* classes as we define them above
'has-hover': { raw: '(hover: hover)' },
}
Is this the expected behaviour? Should there be more notice when the max-* classes aren't successfully generated? Should docs surrounding the max-* classes be easier to find, or added to the screens section? Quick search is no help, unfortunately.
Thanks!
The text was updated successfully, but these errors were encountered:
This restriction effectively means it's impossible to have a height-based breakpoint. Since heights require the use of the 'mybreakpoint': {'raw': '(min-height: 123px)'}, they will always conflict with max-* breakpoints.
constdefaultTheme=require('tailwindcss/defaultTheme')module.exports={theme: {extend: {screens: {'max-sm': {raw: `not all and (min-width: ${defaultTheme.screens.sm})`},'max-md': {raw: `not all and (min-width: ${defaultTheme.screens.md})`},'max-lg': {raw: `not all and (min-width: ${defaultTheme.screens.lg})`},'max-xl': {raw: `not all and (min-width: ${defaultTheme.screens.xl})`},'max-2xl': {raw: `not all and (min-width: ${defaultTheme.screens['2xl']})`},// You can now have your custom media queries and still use max-* ranges.tall: {raw: '(min-height: 800px)'},},},},}
What version of Tailwind CSS are you using?
v3.3.3
What build tool (or framework if it abstracts the build tool) are you using?
Next.js 13.5.4
What version of Node.js are you using?
v18.16.0
What browser are you using?
All
What operating system are you using?
macOS
Reproduction URL
https://play.tailwindcss.com/hzEFzrG4NO
Describe your issue
As title says, any additional media queries such as
hover:hover
ormin-aspect-ratio: 1
will prevent the auto-generation of the max-* classes, which makes sense as you can't have a max hover, but I feel they should still generate for those where it applies, or we should at least get a warning when generated unsuccessfully. This leads to styling not being applied for max breakpoints, and no way for the dev to know unless it's visually noticeable in the browser.As I had trouble figuring out where the max-* classes were defined while trying to identify the bug, once I remembered that they were auto-generated (tucked away in the docs here), I just explicitly defined these in the config as well. It's easier, then, to trace for any other devs unfamiliar with TW.
Is this the expected behaviour? Should there be more notice when the max-* classes aren't successfully generated? Should docs surrounding the max-* classes be easier to find, or added to the screens section? Quick search is no help, unfortunately.
Thanks!
The text was updated successfully, but these errors were encountered: