[v4] New color space support with fallback

[mattmodrowski]

I'm working on an NPM package that brings Radix Colors into Tailwind 4.0:
https://github.com/mattmodrowski/tailwind-4-radix-colors

Radix Colors includes base HEX colors, plus alternative P3 colors. My NPM package is currently set up so a Tailwind user write classes like this to use P3 colors with a HEX fallback:

bg-violet-2 supports-p3:bg-violet-p3-2 dark:bg-violet-dark-2 dark:supports-p3:bg-violet-dark-p3-2

With the new Tailwind 4.0 setup, is there a way to automatically add the P3 support without the additional classes? Ideally I'd like to simplify the output so writing bg-violet-2 automatically generates:

.bg-violet-2 {
  background-color: var(--color-violet-2);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .bg-violet-2 {
      background-color: var(--color-violet-p3-2);
    }
  }
}

The closest thing I can see in the documentation is writing a custom utility, which I tried, but couldn't get the exact output I needed. Plus Tailwind and the Tailwind VSCode plugin no longer thinks of it as a "color," so autocomplete and previews don't look quite right in the IDE.

Is there a better way to achieve this within Tailwind's 4.0 framework? Or any guidance on how to make this work better?