親要素に連動する border-radius

tailwind.config.ts:

const config = {
  // ...
  plugins: [
    // ...
    plugin(({ matchUtilities, addUtilities, theme }) => {
      Object.entries(theme('borderRadius') ?? {}).forEach(([borderRadiusKey, borderRadiusValue]) => {
        if (borderRadiusKey === 'full') {
          return
        }
        matchUtilities(
          {
            [borderRadiusKey === 'DEFAULT' ? 'base-rounded-p' : `base-rounded-${borderRadiusKey}-p`]: (
              spacingValue: string
            ) => ({
              padding: spacingValue,
              '--base-rounded-padding': spacingValue,
              '--base-rounded-radius': borderRadiusValue,
              'border-radius': borderRadiusValue,
            }),
          },
          { values: theme('spacing') },
        )
      })
      addUtilities({
        '.auto-rounded': {
          'border-radius': ['calc(var(--base-rounded-radius) - var(--base-rounded-padding))'],
        },
      })
    }),
  ],
} satisfies Config

Usage:

<div className="base-rounded-2xl-p-1 border">
  <div className="auto-rounded bg-gray-500 h-10 grid place-content-center">
    rounded-2xl + p-1 based inner rounded
  </div>
</div>

<div className="base-rounded-3xl-p-2 border">
  <div className="auto-rounded bg-gray-500 h-10 grid place-content-center">
    rounded-3xl + p-2 based inner rounded
  </div>
</div>