concentric

tailwindcss-concentric による同心円状の角

角丸の要素を角丸の親要素の中に配置する場合、内側の角は外側の角に沿う必要があります：

inner radius = outer radius - gap        (gap = the distance between the two edges on that side)

tailwindcss-concentric はこれを CSS で計算します。子要素に rounded-concentric を指定すると、最も近い角丸の祖先要素の半径、パディング、ボーダー、中間にある通常のラッパー要素のパディングとボーダー、自身のマージン、および absolute／fixed の子要素の場合はインセットを読み取ります。計算方法については references/rules.md、変更前後の例については references/examples.md を参照してください。

このパッケージには 3 つの機能があります：rounded-concentric ユーティリティ（CSS インポート）、監査 CLI（npx tailwindcss-concentric audit [paths...] [--json]）、および tailwind-merge 用の tailwindcss-concentric/merge です。依頼内容に応じて作業してください：

• セットアップ（「tailwindcss-concentric をインストール」「同心円状の角を追加」）：手順 1 を実行し、不足しているものをインストールします。その後、監査を実行するか尋ねます。
• 既存 UI の監査または修正：手順 1 を実行し、監査を実行してから、手順 2～5 を進めます。
• 新しい UI の構築：手順 1 を実行し、別の要素の内側に配置する角丸要素ごとに手順 2～4 を実行します。

1. まずセットアップを確認する

1. Tailwind v4 専用です。 メインの CSS ファイルに @import "tailwindcss"; があることを確認します。プロジェクトが Tailwind v3（@tailwind base; ディレクティブを含む tailwind.config.js）を使用している場合は、作業を中止してユーザーに伝えます。このプラグインは v3 をサポートしていません。
2. インストールしてインポートします。 tailwindcss-concentric が package.json に含まれている必要があります。含まれておらず、ユーザーがプラグインのセットアップまたは使用を依頼した場合は、ロックファイルからプロジェクトのパッケージマネージャーを判別し、インストールします（npm i、pnpm add、yarn add、または bun add tailwindcss-concentric）。レビューのみを依頼された場合は、不足していることを伝え、インストールするか尋ねます。Tailwind をインポートする CSS ファイルでは、その直後にプラグインをインポートする必要があります：

   @import "tailwindcss";
   @import "tailwindcss-concentric";
   

3. tailwind-merge。 プロジェクトでクラスをマージする場合（twMerge、extendTailwindMerge、またはこれらを基にした cn() ヘルパーを使用している場合）、プラグインのクラスを登録します。そうしないと、cn("rounded-lg", "rounded-concentric") では両方のクラスが残り、rounded-lg が優先されます：

   import { extendTailwindMerge } from "tailwind-merge";
   import { withConcentric } from "tailwindcss-concentric/merge";
   
   export const twMerge = extendTailwindMerge(withConcentric);
   // with your own config: extendTailwindMerge({ ...yourConfig }, withConcentric)
   

   cn() で使用されているすべての twMerge インポートを、拡張版に置き換えます。クラス名をマージするコンポーネントで rounded-concentric を使用する前に、必ずこの作業を行ってください。

2. 同心にする要素を決める

プラグインのインストール時に、まず監査を実行します。npx tailwindcss-concentric audit [paths] は、親と一致しない入れ子の角丸半径を一覧表示し、同心の値と使用するクラスを示します。出力された項目は候補として扱ってください。このコマンドはレイアウトではなくマークアップを読み取るため、子要素が本当に親の角に配置されているかは判断できません。また、評価できない値（カスタムテーマの角丸半径、CSS 変数、バリアントクラス）はスキップします。コンポーネントのプロパティを介してファイル間で渡されるクラス名も検出できません。以下のルールに従って各候補を確認し、コンポーネントも必ず自分で読んでください。

次の条件をすべて満たす場合は、同心クラスを使用します。

• 要素に角丸があり、その親（または rounded-* クラスを持つ最も近い祖先）にも角丸がある。
• 要素の角が親の角に位置している。つまり、子要素のその角と親要素のその角の間に何もなく、2つの曲線が一緒に見える。
• 2つの形状が、入れ子になった1つの形状として見えることを意図している。カード内の画像、セグメントコントロール内のアクティブなタブ、検索バー内のボタン、選択リング、枠線付きカード内のパネルなどです。

次の場合は、要素を変更しないでください。

• 要素自体が独立した形状である場合。アバター、ステータスドット、バッジやタグ（rounded-full のピル）、アイコン、コンテンツ中央のチップなどです。
• 親の角に接していない場合。見出しの下のフォームフィールド、カード中央のリスト項目、コンテナに角丸がないタイルのグリッドなどです。
• 間隔が外側の角丸半径以上ある場合（例：rounded-lg p-6）。この場合、数式の結果は0となり、子要素は角が直角になります。角を直角にしたい場合にのみ適用してください。そうでない場合はデザイン上の角丸半径を維持し、レポートにその旨を記載してください。
• すでに正しい場合（rounded-concentric、または意図的に指定された通常の角丸半径）。

3. クラスを選ぶ

状況	クラス
子要素の4つの角すべてが密着している	rounded-concentric
子要素の一部の角だけが密着している（カード上部にぴったり接したメディア、グループの最初または最後の項目）	辺または角のバリアント：rounded-t-concentric、rounded-b-concentric、rounded-s-concentric、rounded-e-concentric、rounded-tl-concentric、rounded-ss-concentric、...
右から左へ表示できるアプリの横方向グループの開始／終了位置	論理バリアント rounded-s-concentric / rounded-e-concentric（開始／終了位置には -l- / -r- を使わないでください）
パディングのある通常のラッパーが1つ、角丸の親と子要素の間にある場合、子要素が absolute inset-* の場合、またはマージン（-mx-4 によるはみ出し）がある場合	rounded-concentric。プラグインはこれらをすべて測定します
同じ側にパディング付きラッパーが2つある場合、またはマージン付きのラッパーが間にある場合	外側のラッパーにも rounded-concentric を追加し、チェーンに加えて、その内側にあるものすべてを通過させます
間隔がインラインスタイルまたはカスタム CSS によるもの	明示的な間隔を指定：rounded-concentric-{n}（スペーシングスケール。rounded-concentric-2 = 0.5rem）または rounded-concentric-[6px]
親のパディングが軸ごとに異なり（px-4 py-2）、角がその両方に沿う必要がある場合	concentric-elliptical を追加
親が corner-shape: squircle を使用している場合	子要素に concentric-squircle を追加（親にも追加するか、[corner-shape:squircle] を指定）
深い入れ子によって最も内側の角が直角になる場合	いずれかの祖先に最小値を設定：[--concentric-floor:2px]

子要素の他のクラスはそのままにしてください。角丸クラスのみを置き換えます（rounded-xl → rounded-concentric、rounded-t-lg → rounded-t-concentric、rounded-[calc(...)] → rounded-concentric）。

4. プラグインから見えないものを把握する

半径は、クラスに rounded を含む最も近い要素から取得されます。間隔は Tailwind クラスのみを対象とし、その要素と間にある最も近いラッパーのパディング（p-*、px-*、ps-* など）およびボーダー幅（border、border-x-4 など）、子要素のマージン（m-*、-mt-4 など）、absolute／fixed の子要素のインセット（inset-*、top-*、start-* など）から取得されます。したがって：

• 各辺で数えるラッパーは1つです。 rounded-3xl > p-3 > p-2 > rounded-concentric の場合、子要素が見るのは p-2 のラッパーのみです。ラッパーのマージンも数えません。外側のラッパーに rounded-concentric を指定してください。背景、ボーダー、または overflow-hidden がない限り、見た目には影響せず、パディングがレスポンシブになっても機能します。明示的な間隔を指定する方法もあります。
• インセットは、角丸の祖先のパディングエッジを基準に測定されます。 これは、その祖先が包含ブロック（relative）であることを前提とします。途中にある relative ラッパーが包含ブロックの場合は、明示的な間隔を指定してください。
• インラインスタイルやカスタム CSS のパディングは認識されません。 Tailwind クラスを使うか、明示的な間隔を指定してください。
• パーセント指定の半径（rounded-[50%]）はサポートされません。 分数インセット（inset-x-1/4）は親のパディングにフォールバックし、auto のマージンは 0 として扱われます。
• @apply クラスが認識されるのは、要素のクラス属性に rounded という文字列が含まれている場合のみです。
• 方向は dir 属性から取得されます。 これには dir="auto" や、@scope に対応したブラウザー（Chrome 118、Safari 17.4、Firefox 146）での任意の深さが含まれます。古いブラウザーでは、入れ子の深さ3つまで読み取ります。CSS の direction のみで設定した方向は検出されません。
• 深さ。 角丸要素が9つ積み重なった場合は正確に処理されます。それより深い場合は、9段目の値が再利用されます。
• 通常の rounded-* 要素は新しいチェーンを開始します。 子要素は外側の同心要素ではなく、その要素を基準に測定されます。

5. 検証する

変更ごとに、期待される半径を手計算し（references/rules.md を参照）、アプリを実行できる場合はブラウザーのコンソールで確認してください：

getComputedStyle(document.querySelector("#el")).borderTopLeftRadius

ピル型要素では非常に大きな数値（例：3.35544e+07px）が表示されますが、これは想定どおりです。

変更した要素とその理由、意図的に変更しなかった要素、プラグインが間隔を認識できない箇所（およびそこで使用したクラス）を報告してください。