Tailwind CSS 中文文档

主题

全部文档

边框

border-radius ​

用于控制元素圆角半径的工具类。

快速参考 ​

类属性
rounded-xsborder-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-smborder-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-mdborder-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-lgborder-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-xlborder-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-2xlborder-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-3xlborder-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-4xlborder-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-noneborder-radius: 0;
rounded-fullborder-radius: calc(infinity * 1px);
rounded-(<custom-property>)border-radius: var(<custom-property>);
rounded-[<value>]border-radius: <value>;
rounded-s-xsborder-start-start-radius: var(--radius-xs); /* 0.125rem (2px) */ border-end-start-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-s-smborder-start-start-radius: var(--radius-sm); /* 0.25rem (4px) */ border-end-start-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-s-mdborder-start-start-radius: var(--radius-md); /* 0.375rem (6px) */ border-end-start-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-s-lgborder-start-start-radius: var(--radius-lg); /* 0.5rem (8px) */ border-end-start-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-s-xlborder-start-start-radius: var(--radius-xl); /* 0.75rem (12px) */ border-end-start-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-s-2xlborder-start-start-radius: var(--radius-2xl); /* 1rem (16px) */ border-end-start-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-s-3xlborder-start-start-radius: var(--radius-3xl); /* 1.5rem (24px) */ border-end-start-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-s-4xlborder-start-start-radius: var(--radius-4xl); /* 2rem (32px) */ border-end-start-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-s-noneborder-start-start-radius: 0; border-end-start-radius: 0;
rounded-s-fullborder-start-start-radius: calc(infinity * 1px); border-end-start-radius: calc(infinity * 1px);
rounded-s-(<custom-property>)border-start-start-radius: var(<custom-property>); border-end-start-radius: var(<custom-property>);
rounded-s-[<value>]border-start-start-radius: <value>; border-end-start-radius: <value>;
rounded-e-xsborder-start-end-radius: var(--radius-xs); /* 0.125rem (2px) */ border-end-end-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-e-smborder-start-end-radius: var(--radius-sm); /* 0.25rem (4px) */ border-end-end-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-e-mdborder-start-end-radius: var(--radius-md); /* 0.375rem (6px) */ border-end-end-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-e-lgborder-start-end-radius: var(--radius-lg); /* 0.5rem (8px) */ border-end-end-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-e-xlborder-start-end-radius: var(--radius-xl); /* 0.75rem (12px) */ border-end-end-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-e-2xlborder-start-end-radius: var(--radius-2xl); /* 1rem (16px) */ border-end-end-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-e-3xlborder-start-end-radius: var(--radius-3xl); /* 1.5rem (24px) */ border-end-end-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-e-4xlborder-start-end-radius: var(--radius-4xl); /* 2rem (32px) */ border-end-end-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-e-noneborder-start-end-radius: 0; border-end-end-radius: 0;
rounded-e-fullborder-start-end-radius: calc(infinity * 1px); border-end-end-radius: calc(infinity * 1px);
rounded-e-(<custom-property>)border-start-end-radius: var(<custom-property>); border-end-end-radius: var(<custom-property>);
rounded-e-[<value>]border-start-end-radius: <value>; border-end-end-radius: <value>;
rounded-t-xsborder-top-left-radius: var(--radius-xs); /* 0.125rem (2px) */ border-top-right-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-t-smborder-top-left-radius: var(--radius-sm); /* 0.25rem (4px) */ border-top-right-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-t-mdborder-top-left-radius: var(--radius-md); /* 0.375rem (6px) */ border-top-right-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-t-lgborder-top-left-radius: var(--radius-lg); /* 0.5rem (8px) */ border-top-right-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-t-xlborder-top-left-radius: var(--radius-xl); /* 0.75rem (12px) */ border-top-right-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-t-2xlborder-top-left-radius: var(--radius-2xl); /* 1rem (16px) */ border-top-right-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-t-3xlborder-top-left-radius: var(--radius-3xl); /* 1.5rem (24px) */ border-top-right-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-t-4xlborder-top-left-radius: var(--radius-4xl); /* 2rem (32px) */ border-top-right-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-t-noneborder-top-left-radius: 0; border-top-right-radius: 0;
rounded-t-fullborder-top-left-radius: calc(infinity * 1px); border-top-right-radius: calc(infinity * 1px);
rounded-t-(<custom-property>)border-top-left-radius: var(<custom-property>); border-top-right-radius: var(<custom-property>);
rounded-t-[<value>]border-top-left-radius: <value>; border-top-right-radius: <value>;
rounded-r-xsborder-top-right-radius: var(--radius-xs); /* 0.125rem (2px) */ border-bottom-right-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-r-smborder-top-right-radius: var(--radius-sm); /* 0.25rem (4px) */ border-bottom-right-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-r-mdborder-top-right-radius: var(--radius-md); /* 0.375rem (6px) */ border-bottom-right-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-r-lgborder-top-right-radius: var(--radius-lg); /* 0.5rem (8px) */ border-bottom-right-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-r-xlborder-top-right-radius: var(--radius-xl); /* 0.75rem (12px) */ border-bottom-right-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-r-2xlborder-top-right-radius: var(--radius-2xl); /* 1rem (16px) */ border-bottom-right-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-r-3xlborder-top-right-radius: var(--radius-3xl); /* 1.5rem (24px) */ border-bottom-right-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-r-4xlborder-top-right-radius: var(--radius-4xl); /* 2rem (32px) */ border-bottom-right-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-r-noneborder-top-right-radius: 0; border-bottom-right-radius: 0;
rounded-r-fullborder-top-right-radius: calc(infinity * 1px); border-bottom-right-radius: calc(infinity * 1px);
rounded-r-(<custom-property>)border-top-right-radius: var(<custom-property>); border-bottom-right-radius: var(<custom-property>);
rounded-r-[<value>]border-top-right-radius: <value>; border-bottom-right-radius: <value>;
rounded-b-xsborder-bottom-right-radius: var(--radius-xs); /* 0.125rem (2px) */ border-bottom-left-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-b-smborder-bottom-right-radius: var(--radius-sm); /* 0.25rem (4px) */ border-bottom-left-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-b-mdborder-bottom-right-radius: var(--radius-md); /* 0.375rem (6px) */ border-bottom-left-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-b-lgborder-bottom-right-radius: var(--radius-lg); /* 0.5rem (8px) */ border-bottom-left-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-b-xlborder-bottom-right-radius: var(--radius-xl); /* 0.75rem (12px) */ border-bottom-left-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-b-2xlborder-bottom-right-radius: var(--radius-2xl); /* 1rem (16px) */ border-bottom-left-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-b-3xlborder-bottom-right-radius: var(--radius-3xl); /* 1.5rem (24px) */ border-bottom-left-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-b-4xlborder-bottom-right-radius: var(--radius-4xl); /* 2rem (32px) */ border-bottom-left-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-b-noneborder-bottom-right-radius: 0; border-bottom-left-radius: 0;
rounded-b-fullborder-bottom-right-radius: calc(infinity * 1px); border-bottom-left-radius: calc(infinity * 1px);
rounded-b-(<custom-property>)border-bottom-right-radius: var(<custom-property>); border-bottom-left-radius: var(<custom-property>);
rounded-b-[<value>]border-bottom-right-radius: <value>; border-bottom-left-radius: <value>;
rounded-l-xsborder-top-left-radius: var(--radius-xs); /* 0.125rem (2px) */ border-bottom-left-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-l-smborder-top-left-radius: var(--radius-sm); /* 0.25rem (4px) */ border-bottom-left-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-l-mdborder-top-left-radius: var(--radius-md); /* 0.375rem (6px) */ border-bottom-left-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-l-lgborder-top-left-radius: var(--radius-lg); /* 0.5rem (8px) */ border-bottom-left-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-l-xlborder-top-left-radius: var(--radius-xl); /* 0.75rem (12px) */ border-bottom-left-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-l-2xlborder-top-left-radius: var(--radius-2xl); /* 1rem (16px) */ border-bottom-left-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-l-3xlborder-top-left-radius: var(--radius-3xl); /* 1.5rem (24px) */ border-bottom-left-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-l-4xlborder-top-left-radius: var(--radius-4xl); /* 2rem (32px) */ border-bottom-left-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-l-noneborder-top-left-radius: 0; border-bottom-left-radius: 0;
rounded-l-fullborder-top-left-radius: calc(infinity * 1px); border-bottom-left-radius: calc(infinity * 1px);
rounded-l-(<custom-property>)border-top-left-radius: var(<custom-property>); border-bottom-left-radius: var(<custom-property>);
rounded-l-[<value>]border-top-left-radius: <value>; border-bottom-left-radius: <value>;
rounded-ss-xsborder-start-start-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-ss-smborder-start-start-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-ss-mdborder-start-start-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-ss-lgborder-start-start-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-ss-xlborder-start-start-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-ss-2xlborder-start-start-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-ss-3xlborder-start-start-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-ss-4xlborder-start-start-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-ss-noneborder-start-start-radius: 0;
rounded-ss-fullborder-start-start-radius: calc(infinity * 1px);
rounded-ss-(<custom-property>)border-start-start-radius: var(<custom-property>);
rounded-ss-[<value>]border-start-start-radius: <value>;
rounded-se-xsborder-start-end-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-se-smborder-start-end-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-se-mdborder-start-end-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-se-lgborder-start-end-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-se-xlborder-start-end-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-se-2xlborder-start-end-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-se-3xlborder-start-end-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-se-4xlborder-start-end-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-se-noneborder-start-end-radius: 0;
rounded-se-fullborder-start-end-radius: calc(infinity * 1px);
rounded-se-(<custom-property>)border-start-end-radius: var(<custom-property>);
rounded-se-[<value>]border-start-end-radius: <value>;
rounded-ee-xsborder-end-end-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-ee-smborder-end-end-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-ee-mdborder-end-end-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-ee-lgborder-end-end-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-ee-xlborder-end-end-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-ee-2xlborder-end-end-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-ee-3xlborder-end-end-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-ee-4xlborder-end-end-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-ee-noneborder-end-end-radius: 0;
rounded-ee-fullborder-end-end-radius: calc(infinity * 1px);
rounded-ee-(<custom-property>)border-end-end-radius: var(<custom-property>);
rounded-ee-[<value>]border-end-end-radius: <value>;
rounded-es-xsborder-end-start-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-es-smborder-end-start-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-es-mdborder-end-start-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-es-lgborder-end-start-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-es-xlborder-end-start-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-es-2xlborder-end-start-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-es-3xlborder-end-start-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-es-4xlborder-end-start-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-es-noneborder-end-start-radius: 0;
rounded-es-fullborder-end-start-radius: calc(infinity * 1px);
rounded-es-(<custom-property>)border-end-start-radius: var(<custom-property>);
rounded-es-[<value>]border-end-start-radius: <value>;
rounded-tl-xsborder-top-left-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-tl-smborder-top-left-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-tl-mdborder-top-left-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-tl-lgborder-top-left-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-tl-xlborder-top-left-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-tl-2xlborder-top-left-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-tl-3xlborder-top-left-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-tl-4xlborder-top-left-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-tl-noneborder-top-left-radius: 0;
rounded-tl-fullborder-top-left-radius: calc(infinity * 1px);
rounded-tl-(<custom-property>)border-top-left-radius: var(<custom-property>);
rounded-tl-[<value>]border-top-left-radius: <value>;
rounded-tr-xsborder-top-right-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-tr-smborder-top-right-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-tr-mdborder-top-right-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-tr-lgborder-top-right-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-tr-xlborder-top-right-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-tr-2xlborder-top-right-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-tr-3xlborder-top-right-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-tr-4xlborder-top-right-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-tr-noneborder-top-right-radius: 0;
rounded-tr-fullborder-top-right-radius: calc(infinity * 1px);
rounded-tr-(<custom-property>)border-top-right-radius: var(<custom-property>);
rounded-tr-[<value>]border-top-right-radius: <value>;
rounded-br-xsborder-bottom-right-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-br-smborder-bottom-right-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-br-mdborder-bottom-right-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-br-lgborder-bottom-right-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-br-xlborder-bottom-right-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-br-2xlborder-bottom-right-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-br-3xlborder-bottom-right-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-br-4xlborder-bottom-right-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-br-noneborder-bottom-right-radius: 0;
rounded-br-fullborder-bottom-right-radius: calc(infinity * 1px);
rounded-br-(<custom-property>)border-bottom-right-radius: var(<custom-property>);
rounded-br-[<value>]border-bottom-right-radius: <value>;
rounded-bl-xsborder-bottom-left-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-bl-smborder-bottom-left-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-bl-mdborder-bottom-left-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-bl-lgborder-bottom-left-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-bl-xlborder-bottom-left-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-bl-2xlborder-bottom-left-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-bl-3xlborder-bottom-left-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-bl-4xlborder-bottom-left-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-bl-noneborder-bottom-left-radius: 0;
rounded-bl-fullborder-bottom-left-radius: calc(infinity * 1px);
rounded-bl-(<custom-property>)border-bottom-left-radius: var(<custom-property>);
rounded-bl-[<value>]border-bottom-left-radius: <value>;

示例 ​

基础示例 ​

使用 rounded-sm 和 rounded-md 等工具类为元素应用不同的圆角半径：

rounded-sm

rounded-md

rounded-lg

rounded-xl

html
<!-- [!code classes:rounded-sm,rounded-md,rounded-lg,rounded-xl] -->
<div class="rounded-sm ..."></div>
<div class="rounded-md ..."></div>
<div class="rounded-lg ..."></div>
<div class="rounded-xl ..."></div>

分别设置各边圆角 ​

使用 rounded-t-md 和 rounded-r-lg 等工具类只为元素的某一边设置圆角：

rounded-t-lg

rounded-r-lg

rounded-b-lg

rounded-l-lg

html
<!-- [!code classes:rounded-t-lg,rounded-r-lg,rounded-b-lg,rounded-l-lg] -->
<div class="rounded-t-lg ..."></div>
<div class="rounded-r-lg ..."></div>
<div class="rounded-b-lg ..."></div>
<div class="rounded-l-lg ..."></div>

分别设置各角圆角 ​

使用 rounded-tr-md 和 rounded-tl-lg 等工具类只为元素的某一个角设置圆角：

rounded-tl-lg

rounded-tr-lg

rounded-br-lg

rounded-bl-lg

html
<!-- [!code classes:rounded-tl-lg,rounded-tr-lg,rounded-br-lg,rounded-bl-lg] -->
<div class="rounded-tl-lg ..."></div>
<div class="rounded-tr-lg ..."></div>
<div class="rounded-br-lg ..."></div>
<div class="rounded-bl-lg ..."></div>

使用逻辑属性 ​

使用 rounded-s-md 和 rounded-se-xl 等工具类，通过逻辑属性设置圆角，它们会根据文本方向映射到相应的角：

Left-to-right

Right-to-left

html
<!-- [!code classes:rounded-s-lg] -->
<!-- [!code word:dir="ltr"] -->
<!-- [!code word:dir="rtl"] -->
<div dir="ltr">
  <div class="rounded-s-lg ..."></div>
</div>

<div dir="rtl">
  <div class="rounded-s-lg ..."></div>
</div>

以下是全部可用的圆角逻辑属性工具类，以及它们在 LTR 和 RTL 模式下对应的物理属性工具类。

类从左到右从右到左
`rounded-s-*` `rounded-l-*` `rounded-r-*`
`rounded-e-*` `rounded-r-*` `rounded-l-*`
`rounded-ss-*` `rounded-tl-*` `rounded-tr-*`
`rounded-se-*` `rounded-tr-*` `rounded-tl-*`
`rounded-es-*` `rounded-bl-*` `rounded-br-*`
`rounded-ee-*` `rounded-br-*` `rounded-bl-*`

若需要更精细的控制，也可以使用 LTR 和 RTL 修饰符，根据当前文本方向有条件地应用特定样式。

创建胶囊按钮 ​

使用 rounded-full 工具类创建胶囊按钮：

rounded-full

html
<!-- [!code classes:rounded-full] -->
<button class="rounded-full ...">Save Changes</button>

移除圆角 ​

使用 rounded-none 工具类移除元素上已有的圆角：

rounded-none

html
<!-- [!code classes:rounded-none] -->
<button class="rounded-none ...">Save Changes</button>

使用自定义值 ​

使用 rounded-[<value>] 等工具类，根据完全自定义的值设置圆角半径：

html
<div class="rounded-[2vw] ...">
 <!-- ... -->
</div>

对于 CSS 变量，也可以使用 rounded-(<custom-property>) 语法：

html
<div class="rounded-(--my-radius) ...">
 <!-- ... -->
</div>

这只是 rounded-[var(<custom-property>)] 的简写，会自动为你加上 var() 函数。

响应式设计 ​

在 border-radius 工具类前加上 md: 等断点变体，即可只在中等屏幕尺寸及以上应用该工具类：

html
<div class="rounded md:rounded-lg ...">
 <!-- ... -->
</div>

在变体文档中了解更多关于使用变体的信息。

自定义主题 ​

使用 --radius-* 主题变量来自定义项目中的圆角工具类：

css
@theme {
  --radius-5xl: 3rem;
}

现在可以在标记中使用 rounded-5xl 工具类：

html
<div class="rounded-5xl">
 <!-- ... -->
</div>

在主题文档中了解更多关于自定义主题的信息。

文档译文以 MIT 协议授权；原文版权归 Tailwind Labs。湘ICP备2026005453号-2

Copyright © Tailwind Labs, Inc.