Custom theme variables not working in media queries for custom variants

[NoelDeMartin]

What version of Tailwind CSS are you using?

v4.1.5

What build tool (or framework if it abstracts the build tool) are you using?

Tailwind Play

What version of Node.js are you using?

Tailwind Play

What browser are you using?

Firefox, Chrome

What operating system are you using?

Ubuntu

Reproduction URL

https://play.tailwindcss.com/IeRkVmIgty?file=css

Describe your issue

In the linked reproduction, when the viewport is smaller than the md breakpoint, both the square and the circle should change colors. But only the square is working.

I am defining two custom variants using exactly the same syntax, but it doesn't work with my custom variable (--breakpoint-custom), though it does with a built-in variable (--breakpoint-md).

I have defined my custom variable under @theme, so I think it should work.

[RobinMalfait]

Hey!

Unfortunately in CSS you can't use CSS variables in media queries like that. That's one of the reasons why you have to use theme(…) to inline the value.

If you use theme(--breakpoint-md) we inline it to the value of the --breakpoint-md variable which maps to 48rem. That's what you can see here:

.small-md\:bg-green-300 {
  @media (width >= 48rem) {
    background-color: var(--color-green-300);
  }
}

For your custom variable, you use theme(--breakpoint-custom) which does give you the value for the --breakpoint-custom, but that value is another CSS variable which is not supported, that's why you see:

.small-custom\:bg-green-500 {
  @media (width >= var(--breakpoint-md)) {
    background-color: var(--color-green-500);
  }
}

If you really want a custom name and re-use an existing value, then you can also do this:

@theme {
  --breakpoint-custom: theme(--breakpoint-md);
}

Notice how we use theme here to inline the variable instead of using var. The biggest downside here is that you can't override the --breakpoint-md variable at "runtime" because the actual CSS variable isn't used.

Play: https://play.tailwindcss.com/1pP6Mf7Zrf?file=css

Hope this helps!

[NoelDeMartin]

I see, that makes perfect sense, thanks :D.