Using @reference in component styles

Why @reference exists

When using Tailwind directives inside Vue, Svelte or CSS modules, the component stylesheet may not automatically know about the theme and custom utilities from the main stylesheet.

Reference without duplicating output

@reference makes the main stylesheet available for directives such as @apply and @variant without importing it into the output a second time.

Keep one source of truth

Put shared theme variables and custom variants in the main CSS entry point and reference that entry point from component-specific styles.