[V4] outline-color should be excluded from the default transition-property #15827
Description
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).