`theme()` function evaluates to garbage in the `@theme` definition in some cases

[janispritzkau]

What version of Tailwind CSS are you using?

v4.1.14

Reproduction URL

https://play.tailwindcss.com/ZQ4brTr12g

Describe your issue

@theme {
    --color-lime: light-dark(theme(colors.lime.950), theme(colors.lime.50));
}

The second argument, theme(colors.lime.50), somehow evaluates to m. This does not happen with 3-digit color variants.

[wongjn]

Seems to be because it is referencing itself as a string. Character index 50:

light-dark(theme(colors.lime.950), theme(colors.lime.50));
                                                  ↑
                                                 50

You can test this out by checking other numbers 0 to mid-50.

As a workaround for now, you could consider using var(), theme() with CSS variable, or --theme().

[janispritzkau]

@wongjn Thanks, I didn't know you could use theme() it with CSS variables. It also works with opacity, which I use in some places. I kind of expected theme(color / opacity) to simplify into one color value rather than the color-mix expression (no big deal, just an optimization)

[thecrypticace]

What a weird bug…

Minimal repro:

@theme default {
  --color-what-50: #f00;
  --color-what-950: #f00;
}

@theme {
  --color-what: some-func(theme(colors.what.950), theme(colors.what.50));
}

@source inline("text-what");

@tailwind utilities;

https://play.tailwindcss.com/U3q7F9lVr2

[thecrypticace]

Thanks for reporting this! The fix will go out in the next release. In the meantime you can use the workaround that @wongjn showed that uses CSS variable syntax instead.