[V4] outline-color should be excluded from the default transition-property

[deebov]

What version of Tailwind CSS are you using?

v4

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

vite

What browser are you using?

chrome

What operating system are you using?

macos

Reproduction URL

https://play.tailwindcss.com/QA1DueVIoX

Describe your issue

In v3, outline-color was not included in the default transition property. And also v4 docs don't even mention that outline-color is now included in the default transition property.

This is what the current documentation says:

transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;

But this is what in reality is being outputted:

transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter

This is kind of an issue for us because we're using outline for all our focus states and in v4 there's a weird glitch when the outline on focus appears:

As you can see, the initial outline color is black (which is equal to currentColor) and then it transitions into the specified color.

This, of course, disappears if we remove the transition property from the focused element. Or we now need to add outline-transparent to get rid of the initial black color but this won't solve the problem that the outline-color is now being transitioned (which is not preferred for our project).

[wongjn]

Seems like it was a breaking change when they first added it in v3: #15591. Hence, it could only be changed for v4 (a major version increment). Changing it back now could be seen as a breaking change which perhaps shouldn't be done unless another major version is tagged.

[philipp-spiess]

Hey! Yeah this is a change we made in v4. In your example you can avoid this by always setting the outline-color regardless of the focus state: https://play.tailwindcss.com/MGTmapoqXi

Will update the upgrade guide to mention this, sorry missing that!