[v4] using variables with breakpoints

[xela92]

What version of Tailwind CSS are you using?

4.0.0-beta.1

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

Vite 5.3.6

What version of Node.js are you using?

v20.15.1

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/NkEDdL7AHx

Describe your issue

Hi,

first of all, very impressed and happy to try the new V4, it's amazing! 😄

I noticed a behavior that I wasn't really expecting:

I have a CSS theme file that is framework-agnostic, and just defines all my variables in :root; I decided to add Tailwind 4 and so imported that CSS file and remapped my variables into Tailwinds'

@theme {
 /* ... */
  --breakpoint-sm: var(--my-sm);
}

Configured like this, my breakpoint was not working: the variable was passed as-is to the media query and it's not supported.

.sm\:bg-red-400 {
    @media (width >= var(--my-sm)) {
      background-color: var(--color-red-400);
    }
  }

Shouldn't this case be handled by Tailwind, making it expand when used in media queries? Am I doing it the wrong way?

Maybe it's intended to let someone use then some other tool (e.g. a PostCSS plugin) and have the correct result, but at first it seemed a little unexpected for it to pass a wrong value to a media query.
Could it be a configurable behavior (inline, like --breakpoint-sm: expand(--my-sm) or with some custom @ rule)?

Thanks for the help,

Have a nice day

[philipp-spiess]

Hey there! Unfortunately var() is not allowed inside @media queries and due to the dynamic nature of variables, we could not inline this even if we wanted, as we don't know what this is going to resolve to at runtime. So there isn't really a way to make this work.

The use case is really interesting though, we'll definitely keep this in mind but for now I do reckon you have to duplicate the breakpoint values.

[xela92]

Totally understandable. We miss something like a "CSS const" thing to define something that never changes and gets inferred at compile time.

Never mind, for now I'll follow your suggestion and duplicate the values.

Thanks!

[cuquo]

we do something similar in our sites with tokens, instead of redefine colors with do that with the tokens, ex:

@theme {
  --color-*: initial;
  --color-red:  oklch(63.43% 0.2539 17.1);
  --color-blue: oklch(44.7% 0.1271 252.66);
 }
 
@layer base {
  :root {
    --sub-header-color:  var(--color-red);
  }

  @media only screen and (min-width: 1024px) {
    :root {
      --sub-header-color:  var(--color-blue);
    }
  }
}