Custom breakpoints using raw in Tailwind v4?

[rhysmatthew]

Hi, since updating to Tailwind 4, my 'raw' breakpoint is not working properly.

limitedHeight: { 'raw': '(max-height: 800px) and (min-width: 1024px)' },

Is this not possible now using the new Tailwind approach? i.e. with CSS variables:

--breakpoint-limitedHeight: "(max-height: 800px) and (min-width: 1024px)";

I've tried the above with no luck, even tried '--breakpoint-limited-height'. If it's used in an @apply block, it silently breaks the whole block it's in and doesn't generate the rest of the CSS.

@media (width >= theme(--breakpoint-lg)) {
   @apply flex items-center shrink-0 text-lg font-var-semibold text-white cursor-pointer limitedHeight:py-5 py-8 xl:py-10 px-4 lgw:px-5 xl:px-6;
}

Simply using limitedHeight above, makes the whole @apply fail silently on builds.

Not a major one but it would be ideal to retain this breakpoint, it was a really useful one when building some tricky bits of UI.

Thanks

[wongjn]

The equivalent in v4 is registering the media query via @custom-variant like:

@custom-variant limitedHeight (@media (max-height: 800px) and (min-width: 1024px));

[rhysmatthew]

Thanks @wongjn, close enough and it will do for now. I did like how it baked into the breakpoint structure beforehand though but maybe it's a future addition to v4.