Add a "ring-outset" or "ring-no-inset" utility

[silvenon]

If I'm not mistaken, Tailwind doesn't offer a utility that cancels ring-inset once it's set, so e.g. you cannot have an inset ring on mobile, and outset ring on larger screens (unless you use a max-width media query).

My suggestion is to add either a ring-outset or ring-no-inset utility which sets --tw-ring-inset to an empty value:

--tw-ring-inset: ;

Setting a custom property to an empty value is valid and is a perfect solution for this use case. I currently cannot find a reference where I learned about this, it's a bit hard to google, but you can see that Chrome doesn't cross it out:

and, ultimately, that this achieves the desired effect. (If it was invalid, the browser would just ignore it.)

[simonswiss]

Hey!

That's an interesting point indeed. As you said, I don't think there is a way to undo a ring-inset at the moment.

Pinging @adamwathan on this. By the way, it's quite possible that you learned about the whitespace value valid custom property thing on Adam's blog post: Composing the Uncomposable with CSS Variables 👍

[silvenon]

Yes, that's where I learned about it, thank you! ❤️

[illright]

There is a workaround with custom properties — [--tw-ring-inset:_]. However, beware that it will not merge with ring-inset when using utilities like tailwind-merge, so you would either have to change the merge settings or replace ring-inset with [--tw-ring-inset:inset]

[silvenon]

Nice trick! I think I'll just go for a custom utility class, though, instead of inlining it. Easier that way and reusable.

Also, I don't use tailwind-merge because I find it to be an anti pattern, so incompatibility is not going to be a problem for me.

[FRSgit]

Hey!

What will be your opinion here? Would a PR adding ring-outset be welcomed?

[vanhooff]

Any update on this?

[silvenon]

Try sending a PR as a suggestion? It seems like fairly little work, and a PR has more gravity than a discussion. Then if the idea is accepted add the documentation part.

[vanhooff]

Any naming preference? ring-outset, ring-no-inset, ring-inset-none or ring-not-inset

[silvenon]

ring-outset sounds best to me, because I can imagine that ring-no-inset would be trickier to understand.

To be clear, I'm not a collaborator, just sharing my opinion.

[madebyfabian]

@vanhooff have you had the change to create a PR? I also need this and consider to create one.

[vanhooff]

@madebyfabian I don’t know why, but I never actually made a PR. Probably got distracted by something else.

[sjunepark]

Any updates?