Tailwind的rounded类尺寸非线性且需查文档确认，如rounded-sm为2px、rounded-md为6px、rounded-lg为8px；自定义值（如4px）须在tailwind.config.js中显式配置borderRadius；方向类仅支持tl/tr/bl/br四种前缀及预设值，不支持任意数字后缀；rounded-full在宽高不等时呈椭圆；响应式断点遵循最小宽度逻辑，高断点优先。
rounded 类的尺寸映射关系必须查文档，别凭经验猜
Tailwind 的 rounded 类不是线性递增的，比如 rounded-sm 是 0.125rem（2px），rounded-md 是 0.375rem（6px），中间跳过了 4px；rounded-lg 直接到 0.5rem（8px）。直接写 rounded-4 或 rounded-6 会无效——Tailwind 默认不生成这类类名，除非你手动扩展 borderRadius 配置。
常见错误：看到按钮需要 4px 圆角，顺手写 rounded-4，结果没生效。原因不是写错，而是默认配置里压根没定义这个值。
- 查当前项目实际生成的圆角类，最稳方式是打开
tailwind.config.js看theme.borderRadius配置项 - 若需自定义尺寸（如精确 4px、10px），必须在配置中显式添加：
borderRadius: { '4': '4px', '10': '10px' }，然后才能用rounded-4、rounded-10 - 所有预设类（
sm/md/lg/xl等）最终都编译为border-radius值，不带单位缩放或计算逻辑
单独控制某一边圆角要用方向性类，不是加后缀
想让左上角 8px、右下角 0，不能写 rounded-lg rounded-br-0 —— Tailwind 没有 rounded-br-0 这种类。正确方式是用方向前缀 + 尺寸类组合：
-
rounded-tl-lg：仅左上角为0.5rem -
rounded-tr-none：仅右上角为0 -
rounded-b：底边两个角（左下+右下）统一设置 - 注意：
rounded-l控制左右两侧（左上+左下），rounded-r同理；rounded-t和rounded-b控制上下两对角
容易踩坑：误以为 rounded-bl-sm 存在，实际 Tailwind 只提供 tl（top-left）、tr（top-right）、bl（bottom-left）、br（bottom-right）四种组合，且只支持 none、sm、md、lg、xl、2xl、3xl 和 full 这些预设值，不支持任意数字后缀。
使用 rounded-full 时要注意内容溢出和交互反馈
rounded-full 本质是 border-radius: 9999px，在宽高相等的元素上才真正成“圆”。如果容器宽高不等（比如一个 200×40 的按钮），它只是横向拉满的椭圆，视觉上可能奇怪。
- 图标按钮常用
rounded-full，但必须确保width === height，否则圆角会失真 - 配合
overflow-hidden使用时，子元素超出部分会被裁切，比如头像组件里图片尺寸略大，就可能被切掉边缘 - 在悬停态（
hover:rounded-full）中动态加圆角，要注意重绘性能——虽然现代浏览器优化较好，但在大量卡片列表中批量 hover 仍可能轻微卡顿
响应式圆角要小心断点继承逻辑
写 rounded-md md:rounded-lg lg:rounded-xl，不代表小屏一定用 md，而是“在默认（无断点）时用 rounded-md，在 md 及以上用 rounded-lg，在 lg 及以上用 rounded-xl”。Tailwind 的断点是“最小宽度”逻辑，不是区间限定。
- 如果你希望 xs 屏用
rounded-sm、sm 屏用rounded-md、其余全用rounded-none，得写成：rounded-sm sm:rounded-md md:rounded-none - 没有
xs:断点（除非你自定义），默认最小断点是sm:（640px） - 多个响应式类同时存在时，以匹配到的**最大断点**为准，低断点类不会“覆盖”高断点类
最常忽略的一点：圆角类本身不触发重排，但和 padding、line-height 等组合时，不同圆角尺寸可能导致内边距视觉不一致，尤其在按钮或输入框中，需要手动对齐垂直居中基准线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
