You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In tailwindcss v4 this has been fixed to be consistent with border utility classes, so outline now translates to outline-width: 1px;. https://tailwindcss.com/docs/outline-width
That means, when upgrading from v3 to v4 outline should be replaced with outline-solid.
However, running npx @tailwindcss/upgrade@next doesn't do that.
The text was updated successfully, but these errors were encountered:
Since the property has an initial value of solid it also sets the outline style already, so rewriting it to outline-solid feels wrong.
The one real change is that it now has a width of 1px instead of 1.5px (browser default), so you could argue that it should translate to outline-[1.5px] (although I am not even sure if that was the same in all browsers?) but the real issue is that in v3 you had to use both utilities like this:
If we renamed outline to outline-[1.5rem] that would order after the outline-1 utility so it would take precedence which also doesn't make sense.
I think that's something we probably can't automatically migrate but you're right we should mention that change in the upgrade guide, let me try to add something.
What version of Tailwind CSS are you using?
v3.4.17
What build tool (or framework if it abstracts the build tool) are you using?
vite 6.0.11
What version of Node.js are you using?
v22.11.0
What browser are you using?
N/A
What operating system are you using?
macOS
Describe your issue
In tailwindcss v3 the
outline
class translates tooutline-style: solid;
.https://v3.tailwindcss.com/docs/outline-style
In tailwindcss v4 this has been fixed to be consistent with border utility classes, so
outline
now translates tooutline-width: 1px;
.https://tailwindcss.com/docs/outline-width
That means, when upgrading from v3 to v4
outline
should be replaced withoutline-solid
.However, running
npx @tailwindcss/upgrade@next
doesn't do that.The text was updated successfully, but these errors were encountered: