Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v3 -> v4 upgrade tool should replace outline with outline-solid #15861

Open
obecker opened this issue Jan 25, 2025 · 2 comments · May be fixed by tailwindlabs/tailwindcss.com#2114
Open

v3 -> v4 upgrade tool should replace outline with outline-solid #15861

obecker opened this issue Jan 25, 2025 · 2 comments · May be fixed by tailwindlabs/tailwindcss.com#2114

Comments

@obecker
Copy link

obecker commented Jan 25, 2025

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 to outline-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 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.

@obecker
Copy link
Author

obecker commented Jan 25, 2025

PS: That change is also missing in the upgrade guide. https://tailwindcss.com/docs/upgrade-guide

@philipp-spiess
Copy link
Member

@obecker outline in v4 does that:

/* Specificity: (0, 1, 0) */
.outline {
  outline-style: var(--tw-outline-style);
  outline-width: 1px;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

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:

<div class="m-10 outline outline-1">outline-1</div>

Where as in v4 you'd only use one anymore:

<div class="m-10 outline-1">outline-1</div>

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants