What version of Tailwind CSS are you using?

v4.0.6

What build tool (or framework if it abstracts the build tool) are you using?

Next.js: 15.1.3

What version of Node.js are you using?

v20.18.1

What browser are you using?

Safari

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/pNcjYumxXW

Describe your issue

Overview

I am trying to migrate a project to v4, which has custom transition properties defined in the config.

Previously:

// tailwind.config.ts
theme: { extend: { transitionProperty: { ring: 'box-shadow' } } }

// component.tsx
<input className="transition-[theme(transitionProperty.colors),theme(transitionProperty.ring)]" />

Expected migration:

// globals.css
@theme {
  --transition-property-ring: box-shadow;
}

// component.tsx
<input className="transition-[var(--transition-property-colors),var(--transition-property-ring)]" />

Specifics

The included transition properties are not included as css variables (i.e. theme(--transition-property-colors) does not work), but it does work with the old syntax, i.e. theme(transitionProperty.colors).

Similar to the previous report in #14479, using the default transition properties (i.e. transition-colors) does not output css variables.

Also, for example, --transition-property-ring: box-shadow does work in the @theme declaration but it is not documented (afaict). If you would like this raised as a separate documentation issue I can do that, but I think that it may change based on how the default transition properties are implemented (i.e. should they also be css variables in the documentation?)