一、边框宽度与方向1. border 基础宽度作用说明border用来给元素加边框。单独写border表示 1px 宽度如果写border-数字数字就是具体的像素值例如border-2是 2px、border-4是 4px。类名边框宽度border-00pxborder1pxborder-22pxborder-44pxborder-88px!-- 1px 边框最常用 --divclassrounded-lg border border-gray-300 p-4普通边框卡片/div!-- 2px 边框视觉更醒目 --divclassrounded-lg border-2 border-blue-500 p-4加粗边框/div避坑指南只写border只设置了宽度还要配合border-*颜色才能看到边框。在 Tailwind v4 中边框颜色默认继承当前文字色currentColor所以如果只写border而不写颜色边框会使用元素的文字颜色。2. 单边与水平、垂直方向border-t / border-x / border-y 等作用说明除了给四边同时加边框还可以只给某一边或某一方向加边框。border-t、border-r、border-b、border-l分别对应上、右、下、左border-x控制左右border-y控制上下。类名作用方向border-t只有上边border-r只有右边border-b只有下边border-l只有左边border-x左边 右边border-y上边 下边!-- 底部 1px 边框常用于分割线 --divclassborder-b border-gray-200 pb-3底部有分割线/div!-- 上下边框中间没有左右边框 --divclassborder-y border-gray-300 px-4 py-3只保留上下边框/div单边写法同样支持指定宽度例如border-t-4表示上边框 4pxdivclassborder-t-4 border-blue-500 pt-4顶部 4px 强调边框/div也支持逻辑属性写法border-s、border-e、border-bs、border-be它们分别表示文字起始侧、结束侧、块方向起始和结束divclassborder-s-4 border-s-blue-500 ps-4文字起始侧的边框/div适用场景列表项之间的分割线、输入框底部边框、强调某一边的卡片、导航栏下边框。二、边框颜色与样式1. 边框颜色border-*作用说明border-*设置边框颜色写法与文字、背景色一致使用border-{色板}-{深浅}。也可以用透明度修饰符/数字控制边框的透明度。divclassrounded-lg border border-blue-500 p-4蓝色边框/divdivclassrounded-lg border border-red-400/50 p-450% 透明度的红色边框/div!-- 输入框聚焦时边框变蓝 --inputtypetextclassrounded-lg border border-gray-300 px-3 py-2 focus:border-blue-500placeholder请输入内容/避坑指南v4 的边框颜色默认继承当前文字色currentColor。也就是说如果你写border但没写颜色边框会和文字同色。想保持稳定外观建议宽度和颜色成对写例如border border-gray-300。2. 边框样式solid / dashed / dotted 等作用说明border-style决定边框是实线、虚线还是点线。Tailwind 用border-solid、border-dashed、border-dotted、border-double等类控制。类名边框样式border-solid实线border-dashed虚线border-dotted点线border-double双线border-hidden隐藏边框但参与表格边框合并border-none完全无边框divclassborder border-dashed border-gray-400 p-4虚线边框/divdivclassborder-2 border-dotted border-blue-500 p-4点线边框/divdivclassborder-4 border-double border-gray-500 p-4双线边框/div适用场景上传框、草稿框、待办占位常用虚线趣味卡片或标签可用点线强调特殊状态可用双线。border-none常用于去掉某个断点下已经存在的边框。三、圆角1. 圆角大小rounded / rounded-lg / rounded-full作用说明rounded-*控制元素的圆角大小让直角变成圆角数值越大圆角越明显。rounded-full会把元素做成完全圆形或胶囊形。类名圆角大小rounded-xs2pxrounded-sm4pxrounded-md6pxrounded-lg8pxrounded-xl12pxrounded-2xl16pxrounded-3xl24pxrounded-4xl32pxrounded-none0无圆角rounded-full完全圆角!-- 常用卡片圆角 --divclassrounded-lg bg-white p-4 shadow-sm8px 圆角卡片/div!-- 圆形头像 --imgclasssize-16 rounded-full object-coversrc/avatar.pngalt头像/!-- 胶囊形标签 --spanclassrounded-full bg-blue-100 px-3 py-1 text-sm text-blue-700标签/span使用指南小按钮和输入框常用rounded-md或rounded-lg卡片常用rounded-lg、rounded-xl头像和圆点用rounded-full。保持整个项目圆角统一能让界面看起来更协调。2. 单个角设置作用说明如果只想给某个角或某一边设置圆角可以使用单边或单角圆角类。rounded-t、rounded-r、rounded-b、rounded-l控制一边的两个角rounded-tl、rounded-tr、rounded-br、rounded-bl精确控制单个角。类名作用位置rounded-t上面两个角rounded-r右边两个角rounded-b下面两个角rounded-l左边两个角rounded-tl左上角rounded-tr右上角rounded-br右下角rounded-bl左下角!-- 图片卡片图片上方圆角下方直角 --divclassw-64 overflow-hidden rounded-t-xl bg-white shadow-smimgclassaspect-video w-full object-coversrc/cover.jpgalt封面/divclassp-4h3classfont-semibold text-gray-900卡片标题/h3/div/div!-- 只给左上角设置大圆角 --divclassrounded-tl-3xl bg-blue-100 p-6只有左上角是圆角/div这些单角类同样可以带上圆角大小例如rounded-t-lg、rounded-br-2xl。v4 还提供逻辑方向写法rounded-s、rounded-e、rounded-ss、rounded-se、rounded-ee、rounded-es适合 RTL 布局。适用场景图片与卡片拼接、标签页顶栏圆角、按钮组两端的圆角处理。四、子元素之间的分割线1. divide-x作用说明divide-x会在子元素之间添加垂直方向的分割线适合水平排列的一组元素。它会自动给“除最后一个子元素外”的元素设置边框避免最后一项后面多出一条线。类名作用divide-x子元素之间添加 1px 竖向分割线divide-x-2、divide-x-4指定分割线宽度divide-x-reverse反向排列时使用!-- 面包屑导航项目之间用竖向分割线隔开 --navclassflex divide-x divide-gray-200 text-sm text-gray-600ahref#classpx-3首页/aahref#classpx-3产品/aahref#classpx-3详情/a/nav分割线颜色通过divide-*颜色类控制divclassflex divide-x divide-blue-300spanclasspx-3项目一/spanspanclasspx-3项目二/spanspanclasspx-3项目三/span/div避坑指南使用divide-x时通常还要在子元素上设置px-*内边距否则文字会紧贴分割线。如果子元素会换行divide-*的效果不稳定这种情况建议改用 Grid/Flex 的gap加显式边框。2. divide-y作用说明divide-y会在子元素之间添加水平方向的分割线适合纵向排列的列表或菜单。类名作用divide-y子元素之间添加 1px 横向分割线divide-y-2、divide-y-4指定分割线宽度divide-y-reverse反向排列时使用!-- 设置列表每项之间用横向分割线隔开 --ulclassdivide-y divide-gray-200liclasspy-3账户设置/liliclasspy-3隐私设置/liliclasspy-3通知设置/li/ul!-- 带颜色的分割线 --divclassdivide-y divide-gray-100 rounded-lg border border-gray-200divclassp-4第一行/divdivclassp-4第二行/divdivclassp-4第三行/div/div适用场景设置列表、评论列表、菜单项、表格下方的内容分组。纵向列表里divide-y比给每项写border-b更简洁也避免了最后一项多出下边框。五、外轮廓outline1. outline 基础用法作用说明outline是元素外部的轮廓线它不占据布局空间也不会影响元素大小常用于输入框、按钮聚焦时的提示。默认outline表示 1px 实线轮廓。!-- 输入框聚焦时显示 1px 蓝色轮廓 --inputtypetextclassrounded-lg border border-gray-300 px-3 py-2 outline-none focus:outline focus:outline-blue-500placeholder点击聚焦后会出现蓝色轮廓/!-- outline-none 去掉默认轮廓改用 border 颜色变化作为聚焦反馈 --buttonclassrounded-lg border border-gray-300 px-4 py-2 outline-none focus:border-blue-500按钮/button使用指南浏览器默认会在元素聚焦时显示轮廓。很多设计会先outline-none去掉默认样式再换成自己统一的颜色和宽度。注意去掉默认轮廓后务必提供其他明显的聚焦样式否则会影响键盘用户的可访问性。2. outline 颜色与宽度作用说明轮廓可以像边框一样设置颜色和宽度。outline-数字设置宽度单位 pxoutline-*设置颜色outline-offset-*控制轮廓与元素边缘的距离。类名作用outline1px 宽度outline-2、outline-42px、4px 宽度outline-none完全去掉轮廓outline-hidden普通模式隐藏但保留强制颜色模式下的轮廓outline-solid/outline-dashed/outline-dotted轮廓样式outline-blue-500等轮廓颜色outline-offset-2、outline-offset-4轮廓与元素之间的偏移!-- 2px 蓝色轮廓 4px 偏移 --buttonclassrounded-lg px-4 py-2 outline-2 outline-offset-4 outline-blue-500带偏移的轮廓/button!-- 聚焦时显示清晰的 2px 轮廓 --inputtypetextclassrounded-lg border border-gray-300 px-3 py-2 outline-none focus:outline-2 focus:outline-blue-500placeholder聚焦后显示 2px 轮廓/适用场景输入框、按钮、链接的键盘聚焦反馈以及需要在不影响布局的情况下强调元素状态的场景。六、焦点环1. ring 焦点环作用说明ring-*通过 box-shadow 在元素周围画一圈“环”常用来做聚焦提示或描边。它在 v4 中的默认宽度是 1px默认颜色继承当前文字色currentColor。类名作用ring1px 焦点环ring-00px取消焦点环ring-22px 焦点环ring-44px 焦点环ring-88px 焦点环ring-inset把环画在元素内侧ring-blue-500等焦点环颜色!-- 聚焦时显示 2px 蓝色焦点环 --buttonclassrounded-lg bg-blue-600 px-4 py-2 text-white focus:ring-2 focus:ring-blue-400登录/button!-- 使用 focus-visible 只在键盘聚焦时显示避免鼠标点击也出现环 --buttonclassrounded-lg border border-gray-300 px-4 py-2 focus-visible:ring-2 focus-visible:ring-blue-500提交/button避坑指南v3 里ring默认是 3px 蓝色v4 已改为 1px 并跟随currentColor。如果希望保留旧版 3px 的视觉效果可以显式写ring-3。同时ring本身不带颜色记得搭配ring-颜色否则可能不明显。2. ring-offset 偏移作用说明ring-offset-*在焦点环和元素之间增加一圈“留白”让环不要紧贴元素边缘。它常配合白色或背景色使用形成更清晰的聚焦效果。类名作用ring-offset-0无偏移ring-offset-22px 偏移ring-offset-44px 偏移ring-offset-white、ring-offset-blue-50等偏移区域的颜色!-- 焦点环与元素之间留出 2px 间隙 --buttonclassrounded-lg bg-white px-4 py-2 ring-2 ring-blue-500 ring-offset-2带偏移的焦点环/button!-- 深色背景上使用白色偏移形成镂空效果 --buttonclassrounded-lg bg-blue-700 px-4 py-2 text-white ring-2 ring-white ring-offset-2 ring-offset-blue-700深色背景按钮/button使用指南ring-offset本质是在环和元素之间再画一圈实心阴影所以偏移颜色通常要和元素背景色一致。如果不设置ring-offset-*颜色默认是白色深色背景上可能显得突兀。