Concentric border-radius with tailwind and css vars

tailwind-concentric-border-radius.html

<!-- Concentric border-radius with tailwind -->
<!-- https://www.youtube.com/watch?v=X3-4jwm4Z4Y&ab_channel=TailwindLabs -->
<!-- https://play.tailwindcss.com/SIHJT7S215 -->
<!-- 
The Calculation 

The the parent border radius and subtract the padding adn this gives you the _child_ border radius.
E.G
parent    = 2rem (32px)
padding   = 0.75rem (12px)

So nested border radius = 1.25rem (20px)

-->

<!-- 
 Parent Classes:
 rounded-(--card-radius) p-(--card-padding) [--card-radius:var(--radius-4xl)] [--card-padding:--spacing(3)]

 Child Class:
 rounded-[calc(var(--card-radius)-var(--card-padding))]
-->



<!-- radius-4xl p-3 -->
<div class="rounded-(--card-radius) p-(--card-padding) [--card-radius:var(--radius-4xl)] [--card-padding:--spacing(3)]">
  <div class="rounded-[calc(var(--card-radius)-var(--card-padding))]">
    child inner
  </div>
</div>