[v4] How to target screen breakpoint in CSS

[subproject22]

I need to change CSS variable depending on breakpoint. I cant find how to target it in docs?

[wongjn]

Use an arbitrary property class like:

<div class="[--my-variable:foo] md:[--my-variable:bar]">

[subproject22]

I need this in CSS, declaring in @layer theme. I know how to use utility classes, I don't know how to reference it in CSS.

[subproject22]

:root {
 --variable: "";
}

// now I need to use breakpoint

[subproject22]

It was in docs I can't find it anymore

[wongjn]

You can use the @variant directive like:

@theme {
  --my-variable: foo;
}

@layer theme {
  :root {
    @variant md {
      --my-variable: bar;
    }
  }
}

[subproject22]

@wongjn yes! thank you man, you are so helpful!