Built-in concentric corner utilities

[andylovescode]

Right now concentric corners are a bit of a pain to do nicely in tailwind, and so I propose the following changes:

1. rounded-* classes set --tw-corner-radius

Make rounded classes set corner radius, so they can be used by the following classes

2. rounding-gap-* classes (please give better names)

The rounding-gap-* classes would apply the following css:

.rounding-gap-3 > * {
    --tw-rounding-gap: calc(var(--tw-rounding-gap) + calc(var(--spacing) * 3));
}

3. Introduce the concentric class

The concentric class simply applies the following:

.concentric {
    border-radius: calc(var(--tw-corner-radius) - var(--tw-rounding-gap));
}

Examples

Let's say somebody had a card, and they wanted a rounded button at the end. They could do something like the following:

<div class="p-6 rounding-gap-6 border-black rounded-2xl">
    <p>Some really cool text</p>
    <button class="concentric bg-blue-600 text-white p-4">Submit</button>
</div>