Include inherit as a value of borderRadius out of the box

[knowler]

I find inherit to be of great value when working with border radius and especially within a component system.

Take for example, the following structure:

<article class="bg-white rounded-lg shadow space-y-2">
  <header class="p-2 bg-gray-100 rounded-t-inherit">
    <h1 class="text-3xl text-gray-600">Hello, World!</h1>
  </header>
  <div class="prose-lg">
    <!-- content -->
  <div>
  <footer class="p-2 bg-gray-200 rounded-b-inherit prose">
    <!-- footer -->
  </footer>
</article>

Having an inherit class for border radii is quite valuable since then I only need to set the value at the topmost level. If I had abstracted the outmost element to be Card and the inner ones to their own CardHeader, CardFooter etc. this becomes even more helpful since I can just set their defaults to inherit.

And yes, I do know how to modify the config myself for my own projects, I just thought that this might be of value for a wider audience which is why I am suggested that it is added to the default config.

Also, I recognize that some people might reach for overflow: hidden in this case, but I find that both unnecessary and a foot gun (since it has the potential to mess with tooltips and popovers — if you don't have the ability to render those outside of the element).

[yazinsai]

Was just about to post a suggestion to have inherit (or initial) added as a default too! This makes alot of sense for responsive design too:

e.g. I want margin: auto applied to an element on mobile, but not on larger screens:

<div class="m-auto lg:m-inherit">Centered on mobile, normal otherwise</div>