[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);
    }
  }
}

[Khoulaiz]

I would strongly recommend to mention this (no var() in --breakpoint) in the documentation of the breakpoint config in tailwind v4.

This might be clear when you are an implementor of tailwind, but for a user, this is just another variable to set and all the other variables can use variables from eg. design tokens. Just not this one.

That would have saved me a lot of time...

[wongjn]

Indeed. You can use @variant instead like:

@variant sm {
  …
}

[trey]

Well that's a lot cleaner! Thanks! Now is that going to get deprecated like @apply was?

[wongjn]

There isn't any intention from what I heard - the maintainers are more happy with @variant since its architecture is closer to vanilla CSS than what @apply is.

[xela92]

Indeed. You can use @variant instead like:

@variant sm {
  …
}

So you propose to do something like this in my shared CSS (correct me if I'm wrong):

@variant sm { @media (min-width: 350px) { @slot; } }

I made a quick test, and it seems to have some downsides:

• I cannot scope my imported CSS directly to theme layer (that could be a non-problem I guess, still it was nice)
• I noticed the order of CSS rules produced is different

for instance, imagine to have an xs breakpoint rule applied:

xs:bg-red-500 sm:bg-blue-500

I noticed xs rule wins against sm one, even when sm breakpoint is reached. This doesn't happen with regular breakpoints.

[wongjn]

I'm not sure where/how you'd be using @variant sm { @media (min-width: 350px) { @slot; } } in this case.

Separately, for xs winning, consider checking that the --breakpoint-xs value is declared in rem units.

[TobyPerplex]

Does anybody know how to target a breakpoint range using @variant? Things I've tried:

@variant lg and max-2xl
@variant lg and @variant max-2xl 
@variant lg:max-2xl

[wongjn]

Nest the @variants:

selector {
  @variant lg {
    @variant max-2xl {
      foo: bar;
    }
  }
}