Tailwind v4 config for custom media queries

[mskubak]

In v3 I use this config for display mode where i put raw media query:

screens: {
    standalone: {
        raw: '(display-mode: standalone)'
    }
 }

Is it possible to do the same in v4? I've tried in @theme ```--breakpoint-standalone: '@media(display-mode: standalone)';`` but the result doesn't work.

@media (width >= '@media(display-mode: standalone)') {
   ...
}

[wongjn]

Register a custom variant: https://play.tailwindcss.com/L8pQAZfmOS?file=css

[jaschaio]

This generates this CSS for me:

.standalone\:text-black {
  @media (display-mode: standalone) {
    color: var(--color-black);
  }
}

Which is wrong as it should be:

-.standalone\:text-black {
-  @media (display-mode: standalone) {
+@media (display-mode: standalone) {
+  .standalone\:text-black {
    color: var(--color-black);
  }
}

[wongjn]

Yes, Tailwind uses CSS nesting extensively, which is why it produces the first code snippet.

[jaschaio]

Ok but the first code snippet doesn't work as the browser requires the @media query to be first

[wongjn]

For browsers that support CSS nesting, the @media query does not need to be at the root.

[jaschaio]

Ok, interesting. Thanks, I thought I had tried it but now I tried again and it indeed works for me with a similar example than the one you gave: https://play.tailwindcss.com/Ef5XGCpsxu

[alexeyff]

you can define a breakpoint variable for this https://tailwindcss.com/docs/responsive-design#customizing-your-theme

[wongjn]

No you can't; the breakpoint theme variables are exclusively for min-width media queries only.