用途
tailwindcss-concentric 是一个 Tailwind CSS v4 插件，用于解决圆角元素嵌套在圆角父元素中时内角与外角不匹配的问题。其核心规则为：内半径 = 外半径 - 间距，其中间距指该侧两条边之间的距离。插件在 CSS 中完成这一计算，为符合条件的内层元素添加 rounded-concentric 类即可自动获得正确的同心圆角。
主要能力
- 自动读取最近的圆角祖先元素（class 含 rounded 的元素）的圆角半径、内边距和边框宽度。
- 计入中间普通包装容器（wrapper）的内边距和边框，以及子元素自身的 margin。
- 对绝对定位或固定定位的子元素，读取其 inset 值。
- 提供审计命令：npx tailwindcss-concentric audit [paths]，列出与父元素不匹配的嵌套圆角，并给出同心值与应使用的类名。审计基于标记而非布局，无法判断子元素是否真的位于父元素角上，也会跳过无法计算的值（如自定义主题半径、CSS 变量、变体类），并且会遗漏通过组件 props 跨文件传递的类名。
- 支持多种类名变体：rounded-concentric（四角）、rounded-t-concentric、rounded-b-concentric、rounded-s-concentric、rounded-e-concentric、rounded-tl-concentric、rounded-ss-concentric 等侧边或角变体；支持显式间距 rounded-concentric-{n} 或 rounded-concentric-[6px]；支持 concentric-elliptical（父元素各轴内边距不同时）；支持 concentric-squircle（父元素使用 corner-shape: squircle 时）；支持通过 --concentric-floor 设置最小半径。
使用方式
- 确认项目为 Tailwind v4，主 CSS 文件包含 @import "tailwindcss";。若为 v3（存在 tailwind.config.js 及 @tailwind base; 指令），插件不支持。
- 安装后，在 CSS 中紧接 Tailwind 导入插件：
@import "tailwindcss";
@import "tailwindcss-concentric";
- 若项目使用 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);
// 自带配置时：extendTailwindMerge({ ...yourConfig }, withConcentric)
并将 cn() 使用的所有 twMerge 导入替换为扩展后的版本。
- 决定哪些元素应使用同心圆角。使用条件需同时满足：元素有圆角且父元素（或最近的 rounded-* 祖元素）也有圆角；元素的角位于父元素的角上，两角之间没有其他东西遮挡；两个形状应被视为一个嵌套形状（如卡片中的图片、分段控件中的活动标签、搜索栏内的按钮、选择环、带边框卡片内的面板）。不应使用的情况包括：独立形状（头像、状态点、徽章、标签、图标、内容中间的 chip）；不接触父元素角（标题下的表单字段、卡片中间的列表项、容器无圆角的网格瓦片）；间距至少等于外半径（如 rounded-lg p-6，公式结果为 0 会使子元素变直角）；元素已正确。
- 根据情况选择类名，替换子元素原有的圆角类，保留其余类。
- 验证：按规则手动计算预期半径，并在浏览器控制台检查：
getComputedStyle(document.querySelector("#el")).borderTopLeftRadius
胶囊形元素会报告很大的数值（如 3.35544e+07px），属正常。
适用场景
- 卡片内嵌图片或面板需要与卡片外角保持视觉一致。
- 分段控件中活动标签与容器圆角对齐。
- 搜索栏内按钮与搜索栏圆角匹配。
- 带边框卡片内面板、选择环等嵌套形状。
- 需要审查现有 UI 中圆角不匹配问题的项目。
限制
- 仅支持 Tailwind CSS v4，不支持 v3。
- 半径取自最近的 class 含 rounded 的元素；间距仅从 Tailwind 类计算，包括内边距（p-、px-、ps-* 等）、边框宽度（border、border-x-4 等）、子元素 margin（m-、-mt-4 等）以及绝对/固定定位子元素的 inset（inset-、top-、start- 等）。每侧只计一个包装容器，包装容器上的 margin 不计入；内联样式或自定义 CSS 的内边距不可见。
- 不支持百分比半径（rounded-[50%]）；分数 inset（inset-x-1/4）回退为父元素内边距；auto margin 计为 0。
- inset 从圆角祖先的内边距边缘测量，假设其为包含块（relative）；若中间有 relative 包装容器作为包含块，需使用显式间距。
- @apply 类仅在元素 class 属性文本包含 rounded 时生效。
- 方向来自 dir 属性，包括 dir="auto"；旧浏览器最多读取三层嵌套；仅通过 CSS direction 设置的方向无法检测。
- 九个堆叠的圆角元素可精确计算，更深层复用第九层的值。
- 普通 rounded-* 元素会开启新的计算链，其子元素从它而非外层同心元素测量。
- 审计无法判断布局位置，会跳过无法计算的值，并遗漏跨文件通过 props 传递的类名。
暂未提供
价格、平台支持范围、性能数据等资料未提供。