用 before 伪元素画小箭头需在 @layer components 中自定义 border 三角，动态偏移用 right + translate-x-1/2，方向匹配菜单位置（top-full 朝上、bottom-full 朝下），避开展开动画 transform 干扰，暗色模式须显式声明 .dark .menu-arrow::before。
用 before 伪元素画小箭头，别碰 absolute 定位错位
小箭头本质是菜单容器的 ::before 或 ::after 伪元素，用 border 技巧生成三角形。但 Tailwind 默认不提供 border 三角类，得自己写——而且必须写在全局 CSS 中，否则 JIT 不识别。@layer components 是唯一安全位置，比如：
@layer components {
.menu-arrow::before {
content: "";
position: absolute;
top: -8px;
left: 16px;
border-width: 4px 4px 0 4px;
border-style: solid;
border-color: #fff transparent transparent transparent;
}
}关键点：箭头要随菜单位置动态偏移（比如菜单右对齐时，箭头得靠右），所以 left 值不能写死，建议用 right + translate-x-1/2 组合，或配合 JS 动态计算后设 style.left。
箭头方向要匹配菜单触发点，top-full 和 bottom-full 别混用
菜单从按钮下方弹出（最常见），箭头应朝上，此时菜单容器需加 top-full（即 top: 100%），箭头伪元素 top: -8px 才能贴住菜单顶部边缘；若菜单从上方弹出（比如 bottom-full），箭头就得朝下，border-color 要改成 transparent transparent #fff transparent，且 top 改为 bottom: -8px。容易踩的坑：
- 用了
top-full却让箭头朝下 → 箭头悬在菜单上方空白处 - 按钮在右侧、菜单
right-0，但箭头仍用left: 16px→ 箭头跑出屏幕 - 没给菜单容器加
relative→ 伪元素定位基准错乱，箭头飘到页面任意位置
移动端点击后箭头错位？检查 transform 和 scale 干扰
如果菜单用了 scale(0.95) 或 transform: translateY(-4px) 类做入场动画，伪元素会一并缩放/偏移，导致箭头变小或脱节。解决办法只有两个：
- 把箭头伪元素套进一个不参与 transform 的子容器里（比如额外包一层
div，菜单动画只作用于外层） - 改用
max-height+opacity动画替代transform，完全避开位移影响
fixed 容器里的渲染有偏差，若箭头边缘模糊或偏移 1px，加 backface-visibility: hidden 强制硬件加速可缓解。箭头颜色要随主题自动切换，dark: 前缀得写进伪元素规则里
Tailwind 的 dark: 前缀对伪元素无效，dark:bg-gray-800 这类类名不会作用于 ::before。必须在 @layer components 里显式写暗色适配：
.menu-arrow::before {
/* 默认浅色 */
border-color: #fff transparent transparent transparent;
}
.dark .menu-arrow::before {
/* 暗色模式下 */
border-color: #1f2937 transparent transparent transparent;
}别试图用 @apply dark:border-gray-800 —— @apply 在伪元素里不支持状态前缀嵌套。真正容易被忽略的是：箭头颜色必须和菜单背景严格一致，哪怕差一个灰度，视觉上都会像“粘歪了”。 
