Unexpected behavior when using additional screens for theme:

[TomFreudenberg]

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:

warn - The `min-*` and `max-*` variants are not supported with a `screens` configuration containing mixed units.

but this took me a long time to come here, because if I use it like we do (having an additional ws):

    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 xs into

    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 ws screen even we don't use it.

This will not wrap anymore while ws exists:

    <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

max-lg:flex-wrap max-lg:px-20 max-md:px-10 max-sm:px-6 

do not match until ws is dropped.

---

I do not have an idea what might happen but would be happy about a feedback.

[wongjn]

The max-* and min-* 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:

addVariant('ws', '@media (min-aspect-ratio: 3/2) and (max-height: 399px)');

[TomFreudenberg]

@wongjn Thanks for feedback - understand that.

First - I have removed all of my max-queries by now and use just straight forward. That works.

To use ws I should in general use addVariant or still leave that in the screens section as is?

I just ask while you wrote "as a workaround"

[wongjn]

You should in general use addVariant for ws.

[TomFreudenberg]

@wongjn thanks for your feedback and help

We could fix everything and are aligned with tailwindcss again.

Great

[TomFreudenberg]

Hint:

In addition - maybe you put a warning to console, when not supported mixins exists like you already do for rem and px mixes.