Unexpected behavior when using additional screens for theme: #16495
-
Using: "class-variance-authority": "0.7.1",
"clsx": "2.1.1",
"framer-motion": "12.4.2",
"lru-cache": "11.0.2",
"lucide-react": "0.475.0",
"next": "15.1.7",
"shadcn": "2.3.0",
"postcss": "8.5.2",
"prettier": "3.5.0",
"prettier-plugin-tailwindcss": "0.6.11",
"sass": "1.84.0",
"tailwind-merge": "3.0.1",
"tailwindcss": "3.4.17",
"tailwindcss-animate": "1.0.7",
"tailwindcss-base-font-size": "1.0.1",
"typescript": "5.7.3" I extended my theme by: theme: {
screens: {
xs: '22.5rem',
...defaultTheme.screens,
}, using it like this, does show a warning:
but this took me a long time to come here, because if I use it like we do (having an additional theme: {
screens: {
xs: '22.5rem',
...defaultTheme.screens,
ws: { raw: '(min-aspect-ratio: 3/2) and (max-height: 399px)' },
}, the warning is never printed anymore. After correcting the theme: {
screens: {
xs: '360px',
...defaultTheme.screens,
ws: { raw: '(min-aspect-ratio: 3/2) and (max-height: 399px)' },
}, our page is stil broken until we remove the This will not wrap anymore while <div
id="mission"
className="flex justify-center bg-white px-4 text-slate-700 lg:px-12 xl:px-16 portrait:pb-10 portrait:pt-40 landscape:pb-32 landscape:pt-60"
>
<div className="max-lg:flex-wrap max-lg:px-20 max-md:px-10 max-sm:px-6 flex h-full max-w-7xl items-start justify-center lg:gap-12 xl:gap-20 portrait:lg:px-20 landscape:lg:px-32"> These rules
do not match until I do not have an idea what might happen but would be happy about a feedback. |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 2 replies
-
The As a workaround, you could convert the complex screen variants to custom variants with addVariant('ws', '@media (min-aspect-ratio: 3/2) and (max-height: 399px)'); |
Beta Was this translation helpful? Give feedback.
-
@wongjn Thanks for feedback - understand that. First - I have removed all of my To use I just ask while you wrote "as a workaround" |
Beta Was this translation helpful? Give feedback.
-
Hint: In addition - maybe you put a warning to console, when not supported mixins exists like you already do for |
Beta Was this translation helpful? Give feedback.
The
max-*
andmin-*
variants no longer work when you have "complex"screen
configuration, see the Restrictions section in #9558 for details.As a workaround, you could convert the complex screen variants to custom variants with
addVariant()
in a Tailwind plugin: