必须同时设w-0和h-0，缺一不可；四边交点在零尺寸下斜向收拢形成三角形，仅单边有色、其余三边显式transparent，方向由有色边对边决定。
用 w-0 h-0 + 单边有色边框画三角形
必须同时设 w-0 和 h-0，缺一不可。浏览器靠四边交点在零尺寸下斜向收拢形成三角形；若只写 w-0 而 h-1，底边会被拉长，变成梯形或小矩形块。
仅保留一个方向的边框颜色，其余三边必须显式设为透明：border-t-transparent、border-r-transparent、border-l-transparent——不能省略任一，否则未声明的边会继承 currentColor（常是文字色），出现意外色块。
-
border-b-red-500→ 向上指（底部边框有色，视觉区域朝上收束） -
border-t-blue-500→ 向下指（顶部边框有色，朝下收束） -
border-l-green-500→ 向右指（左边框有色，朝右收束） - Tailwind v3.3+ 可简写为：
border-4 border-transparent border-b-red-500，其中border-4设宽，border-transparent批量清色，再单独覆盖底部
用 aspect-square 控制正方形容器
aspect-square 本质是 aspect-ratio: 1/1，但它不“固定尺寸”，而是维持宽高比——需配合明确宽度来源才生效，比如 w-16、max-w-md 或 flex-1。父容器若无宽度（如 flex 项未设 flex-basis），它就塌成一条线。
常见失效场景：加了 aspect-square 但没效果，大概率是子元素用了 height: 100% 或 position: absolute，绕过了 aspect-ratio 计算逻辑。
- 兼容老浏览器（IE9+）要用 padding-top 方案：
padding-top: 100%+position: relative容器 +absolute子元素 -
aspect-square在 Chrome 88+、Firefox 89+、Safari 15.4+ 可用，IE 完全不支持 - 别写
w-20 h-20硬编码——破坏响应式，且与 Tailwind 原子化意图冲突
用 odd/even 变体实现表格斑马纹
直接写 odd:bg-gray-50 even:bg-gray-100 到 <tr> 上就行，Tailwind 自动编译成 <code>:nth-child(odd) 规则，还带 !important 保护和 dark mode 支持。
关键约束：这些变体只对父容器的**直接子元素**生效。如果 <tr> 外包了 <code><div>，或 React 中用了 <code>&& 条件渲染导致某些行跳过，序号就会错乱，斑马纹断掉。
- 确保
<tr> 是 <code><tbody> 的直接子节点，中间不能插空格文本节点或注释 <li>不要给 <code><thead> 或 <code><tfoot> 的 <code><tr> 加 <code>odd/even，它们不参与 tbody 内计数 - 禁用手写
tr:nth-child(2n+1)类——无法响应 dark mode，打包也不 tree-shake - 加
shrink-0防 flex 压缩 - 避免在父容器上设
overflow: hidden，可能裁掉边框三角形的尖角 - 若嵌套在 grid 或绝对定位中，检查是否触发了隐式 min-size 限制（如 grid 默认
min-width: 0不生效）
画图形时容易被忽略的布局干扰
即使类名全对，三角形仍歪斜或消失，八成是父容器在捣鬼：flex 布局下默认 flex-shrink: 1，可能把 w-0 h-0 元素压缩变形；padding 或 gap 也可能让边框交点偏移。
