TIL how to reference Tailwind 4 theme variables in JavaScript

Tailwind 4 exposes all theme values as CSS custom properties, so you can read them from JavaScript via getComputedStyle without importing any config:

const styles = getComputedStyle(document.documentElement)
const primary = styles.getPropertyValue("--color-primary")

I used this to style the topbar loading indicator with my theme’s primary color instead of a hardcoded value:

topbar.config({ barColors: { 0: styles.getPropertyValue("--color-primary") } })

This keeps the color in sync with the theme automatically.