Hey! So the reason for this is that we no longer have the default transition property list as CSS variables as we realized nobody was really changing the defaults here besides maybe adding new presets (which is still supported). Because of the backward compatibility though, the old syntax (transitionProperty.colors) will still work for now but since these aren't CSS vars, the new syntax won't right now.

What you can do for now is to create other named transition properties that contain the mixture of properties that you are often using in your app, e.g.:

@theme {
  --transition-property-ring: box-shadow;
  --transition-property-ring-color: box-shadow, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

This way you can just use transition-ring and transition-ring-colors and don't have to worry about what is present as a CSS variable and not (You can find the other defaults here: https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/utilities.ts#L3594-L3601)

Going to leave this open so we have time to think over this a bit though, thanks!

Thanks for the response & consideration!

I can certainly appreciate that these are 'special' values that perhaps don't really belong in the "theme" (since nobody would really change them), and I do appreciate that they're still extensible.

However, I think that if the theme() function is really supposed to "evolve" to the new version, then they should be made available that way. Or perhaps they belong in some new class of "static" css variables, or accessible via some sort of static function instead?

I do think though, given that you can extend them by editing the @theme directive, they should be elevated to true theme status for consistency.

One other thought that I had, was that the transition-colors utility also changed to include outline-color and perhaps if someone wanted to customize their theme to revert that, then that might be supported if transition-property was changed to be a first-class theme property & transition's default also used those theme css variables.

For example in this playground, we can override transition-colors but it outputs two css classes, and transition (default) does not take into account that transition-colors was overriden: https://play.tailwindcss.com/tNvFvk7pR1

  @theme {
    --transition-property-colors: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  }
  /* ... */
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: var(--transition-property-colors);
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

nobody was really changing the defaults here

As one of the nobodies who changed the defaults to include @property's for --tw-gradient-from-position and friends, it would be really nice to have any way at all to configure these.

I change the default transition property value on most of my projects. It would be great to have a way to custumize it via @theme.