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>

[sergiodxa]

This would be nice, but I propose that instead of using rounding-gap-6, the padding utilities can set the --tw-rounding-gap variable, so you just do p-6 rounded-2xl and then inside you can set concentric (maybe rounded-concentric?) and that does the value of 2xl minus the padding.

The rounded-concentric should also set the --tw-corner-radius with the result of the parent minus the padding, so if you have another padding (defaults 0) and another rounded element inside it can keep using a reduced rounded.

Eventually you only need one explicit rounded corners of the first elements and everything else can be rounded-concentric.

[andylovescode]

Yeah, I was thinking about that, but I wanted it to be more customizable. Although in hindsight you can probably override --tw-rounding-gap yourself if need be, as that's a very sensible default. There still should be a rounding gap class in case you want to do stuff with margins that would break the default assumptions.

[thilojaeggi]

Would be curious of any progress on this?