Add ability for custom breakpoints to be defined by a css variable

[michal-skoula]

Normally CSS doesn't allow you to use a css variable inside of a media query:

@media (width >= var(--breakpoint-sm) ) {
  display: none;
}

This only works with preprocessors.

But when i define a breakpoint in my theme:

@theme {
  --breakpoint-nav: var(--breakpoint-sm);
}

Tailwind simply "passes" the value from the css variable into the custom one, which won't work because CSS doesn't allow it.

I think it would be a really nice quality of life feature for tailwind to compile the css variable into a string like 40rem or 640px so that the media query still works.

P.S.: Apologies if my contribution is not following conventions, it's my first time contributing 😅

[adamwathan]

Hey! Can use the --theme function for this:

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

[michal-skoula]

Oh I didn't know this feature existed, thank you!