tailwindcss icon indicating copy to clipboard operation
tailwindcss copied to clipboard

Add `radius-*` utilities and deprecate `rounded-*` utilities

Open adamwathan opened this issue 1 year ago • 0 comments

This PR adds a new set of radius-* utilities to replace the existing rounded-* utilities.

These utilities derive their values from the --spacing-* scale by default, but can also be configured with radius-specific values using the --radius-* scale.

This change makes it easier to do things like concentric border radiuses, where you need to subtract the padding of the parent when calculating the child radius:

<div class="radius-8 p-2">
  <div class="radius-6">

Using the old t-shirt scale there was no clear connection to the spacing value which made this sort of thing annoying, and also difficult to notice that the value was carefully chosen to be concentric when reading the code.

I've kept the rounded-* utilities around for backwards compatibility, including the old t-shirt scale but have registered as inline reference so that they don't produce CSS variables by default. We plan to mark these as deprecated via IntelliSense though, and also plan to update our codemod tooling to make it easy to migrate from rounded-* to radius-* automatically.

adamwathan avatar Nov 07 '24 21:11 adamwathan