Referencing prefixed custom variables

[auirarrazaval]

I am currently migrating from v3 to v4, and I came across the following issue.
When defining color scales in v3, with tailwind.config.js, I could add the my-color.DEFAULT key which would make the my-color alias available in the project. For v4, I'm trying to emulate this using the @theme {} directive ttoo define the scale, and @theme inline {} to define the default alias. Something like:

/* /theme/colors.css */
@theme {
    /* Reset */
    --color-*: initial;

    /* Theme Colors */

    /* Primary */
    --color-primary-50: #9FA4D0; /* old: bg-weak */
    --color-primary-100: #8F97C8; /* new */
    --color-primary-200: #7F8AC7; /* new */
    --color-primary-300: #6F7DBE; /* new */
    --color-primary-400: #5F6EA4; /* old: bg-strong */
    --color-primary-500: #485A97; /* new */
    --color-primary-600: #313F89; /* old: weak */
    --color-primary-700: #202A75; /* new */
    --color-primary-800: #0C1461; /* old: primary */
    --color-primary-900: #0B114D; /* old: strong */
    --color-primary-950: #090E3A; /* old: label */
}

@theme inline {
    /* All defaults */

    --color-primary: var(--color-primary-800);
}

This initially works. However, I have two requirements for this project:

1. This is a ui library, so I need to add a prefix to the classes.
2. I need to be able to export the theme for other libraries to use, WITHOUT the prefix (as a standalone theme)

My entrypoint for tailwind, therefore, looks something like this:

@import 'tailwindcss' prefix(tds);
@import './theme/colors';

Again, this correctly adds the prefix to all classes as expected, HOWEVER, it does not add it to the var(--color-primary-800) value in the @theme inline reference. This means that the produced theme looks like this:

Note that the dedfault value tds-color-primary is not generated.

If I change the default to:

@theme static {
    /* All defaults */

    --color-primary: var(--color-primary-800);
}

to force the generation of the class, the default is generated, but like this:

note how the referenced value is not prefixed, and therefore tailwind cannot find it and purges it.

If I update once again to

@theme inline {
    /* All defaults */

    --color-primary: var(--tds-color-primary-800); /* 'hardcoded' the prefix */
}

Then tailwind parses it correctly and the alias works as expected

This is not ideal, as I have to hardcode the prefix in the reference, and if I import this theme in another project that doesn't use the same prefix, it wouldn't work out-of-the-box

Am I missing a setting? Or is this actually a bug in v4?

[wongjn]

You can use theme() instead of var(). The theme() function will account for the prefix():

@theme inline {
    /* All defaults */

    --color-primary: theme(--color-primary-800); 
}

You'll get output like:

.tds\:text-primary {
  color: #0C1461;
}

Or you can use --theme():

@theme inline {
    /* All defaults */

    --color-primary: --theme(--color-primary-800); 
}

You'll get output like:

.tds\:text-primary {
  color: var(--tds-color-primary-800);
}

[auirarrazaval]

Perfect! Thank you very much

It feels like this should be the recommended way to reference theme variables in this section of the Docs, or at least a mention to it