Unable to get breakpoint CSS value in JS

[mhuggins]

I'm trying to follow the example from the Tailwind v4 docs regarding how to get a CSS value in JS. I specifically want to get a --breakpoint-* value.

function matchesBreakpoint(breakpoint: string): boolean {
  const styles = window.getComputedStyle(document.documentElement);
  const property = `--breakpoint-${breakpoint}`;
  const size = styles.getPropertyValue(property) || "0px";

  return window.matchMedia(`(min-width: ${size}`).matches;
}

Unfortunately, the call to styles.getPropertyValue always returns an empty string. Looking at my document :root, in chrome inspector does not show any --breakpoint-* variables, despite the fact that I am using these utilities in my CSS styles.

I did come across this similar discussion, which calls out using @theme static to define variables that should be maintained in production. However, I don't see a way to take the predefined variables and expose them. In other words, this:

@theme static {
  --breakpoint-sm: var(--breakpoint-sm);
  --breakpoint-md: var(--breakpoint-md);
  --breakpoint-lg: var(--breakpoint-lg);
  --breakpoint-xl: var(--breakpoint-xl);
  --breakpoint-2xl: var(--breakpoint-2xl);
}

...does not work since it just results in CSS warnings like --breakpoint-sm is not defined.

How can I expose these predefined breakpoint values to my JS?

[wongjn]

You'd use static to include all Tailwind's default variables like:

@import "tailwindcss" theme(static);

This would then mean all CSS variables would be available.

Otherwise, to pick out the core breakpoints to be statically output, you could do:

@import "tailwindcss";

@theme static {
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --breakpoint-2xl: 96rem;
}

[mhuggins]

I see, it's all or nothing, and if I want to achieve partial, then I just have to take the values straight from the source. Not what I was hoping for, but thank you!