直接用@layer components定义弹窗基础类可稳定复用，但不能写在组件<style>块中，因JIT引擎不解析运行时注入的scoped样式；需置于全局CSS文件中，且必须用@layer components包裹以防PurgeCSS误删。
直接用 @layer components 定义弹窗基础类，配合 max-w-md + overflow-y-auto + min-h-0 三件套，就能在绝大多数场景下稳定复用，无需 JS 控制尺寸或动画。
为什么不能把弹窗样式写在组件 <style> 块里
Tailwind 的 JIT 引擎只扫描 content 配置中声明的文件路径（如 src/**/*.{js,ts,jsx,tsx}），而 Vue/React 单文件组件里的 <style scoped> 是运行时注入的字符串，根本不会被解析。写在里面等于白写。
-
@apply必须放在全局 CSS 文件（如src/styles/tailwind.css）中，且包裹在@layer components里 - 否则构建时 PurgeCSS 会清掉这些类，开发时看似生效，打包后消失
- 命名建议加前缀，比如
.modal-base，避免未来和原生 utility 冲突（如某天 Tailwind 加了modal类）
@apply 里能不能写 md:、dark:、hover:
可以，但必须写在同一行 @apply 中，且不能拆成多条。Tailwind 的 JIT 能识别并生成对应规则，包括交叉状态（如 dark:hover:bg-gray-800）。
- ✅ 正确：
@apply fixed inset-0 z-50 flex items-center justify-center bg-black/50 md:bg-black/40 dark:bg-gray-900/70; - ❌ 错误：分两行写
@apply fixed inset-0;和@apply md:bg-black/40;—— 后者会覆盖前者，且md:可能不生效 - ⚠️ 注意：
focus-trap、键盘关闭、点击遮罩层防冒泡等交互逻辑，@apply不管，得靠 JS 补足
如何防止小屏溢出和 iOS Safari 布局错乱
弹窗内容区容易在小屏横向滚动，或在 iOS Safari 中撑高、不收缩——这不是样式没写对，而是 flex 子项默认行为导致的。
立即学习“前端免费学习笔记（深入）”；
- 宽度必须用
w-full max-w-md组合：自适应又控上限，比sm:max-w-lg更轻量 - 内容容器加
max-h-[80vh] overflow-y-auto，防内容过长导致底部不可见 - iOS Safari 中，给弹窗主体（即
<div class="bg-white rounded-lg">）加min-h-0，否则 flex 子项不收缩 - 别用
animate-fadeIn这类依赖visibility: hidden的动画类，fixed 元素默认是visible，动画常失效
真正容易被忽略的是：弹窗不是纯样式问题。即使 @layer components 封装得再干净，只要没处理好事件冒泡（比如点击按钮也触发遮罩层关闭）、焦点捕获（Tab 键不出弹窗）、或移动端 touch 与 click 的差异，用户一交互就破功。样式可复用，交互逻辑得单独兜底。
