Support @theme reference without @import

[adamwathan]

This PR adds support for using @theme reference { … } as a way to define theme values that you don't want emitted in the final CSS but do want to be used as a source of truth for utility values.

This fleshes out what we already loosely supported with @import "./my-theme.css" reference, while fixing some bugs we actually had in that implementation surrounding multiple @theme definitions.

The main motivating use case for this is to support having access to your theme in CSS module scopes like Vue's <style> blocks, where you may want to use @apply:

<template>
  <h1>Hello world!</h1>
</template>

<style>
@import "tailwindcss/theme" reference;

h1 {
  @apply text-4xl text-indigo-500 py-6;
}
</style>

For @apply to work here it's necessary for your theme values to be "in scope" from Tailwind's perspective, and since all of these <style> blocks are processed completely independently, Tailwind has no idea what theme values you're using in your global CSS file when this block is processed.

This also makes it possible for people to suppress the output of all of the CSS variables if that's something they want to do, but this isn't a use case I personally think makes sense to advertise — I think we should be opinionated about pushing people to want to output these variables so they can access their theme values with var(…) in arbitrary values or in JS contexts.

[Steffan153]

#13177 seems to have reverted this, and @theme reference now is no different than @theme. I was liking using reference because the build sizes were waaaay smaller without the variables.

[oneezy]

i can't get this to work in svelte (v5) / sveltekit (v2) / tailwind (v4).