Tailwind CSS – 程序人生

Tailwind CSS 是越用越喜欢，这里记录一些常见问题。

Table of Contents

时生成样式

只要是 Tailwind CSS 核心工具类支持的 CSS 属性，您基本上都可以使用 […] 这种任意值语法来实时生成样式。

常见问题

Vue/Nuxt Teleport: 越狱层叠上下文的利器 (配合 z-[…] 精准制胜)

当菜单的DOM结构嵌套在设置了 z-index 的元素内时，它会被困在这个元素的层叠上下文中，无论自身 z-index 多高都无法覆盖页面其他部分。此时需要一套组合拳来解决：

越狱 – 使用 <Teleport>：<Teleport to=”body”> 就像一把钥匙，将菜单的DOM结构从元素内“传送”到 <body> 的顶层，使其成功“越狱”，摆脱了原父元素的层级束缚。
制胜 – 使用 z-[…]：然而，“越狱”后，菜单和原来的元素成为了平级的兄弟元素。要确保菜单绝对在 header 之上，它必须拥有更高的 z-index 值。这时，Tailwind 的任意值语法 z-[…] 就成了制胜的关键。通过为菜单和遮罩层设置一个比 header（如 z-50）更高的值，例如 z-[51]，我们能让 Tailwind 的 JIT 引擎即时生成 z-index: 51。

解决头部内容随浏览器变宽而向中心移动的问题

当头部内容（如Logo和按钮）会随着浏览器变宽而向中间移动时，其根本原因是使用了Tailwind的container和mx-auto类。container在宽屏下会设置一个固定的最大宽度，mx-auto则将其居中，导致两侧产生可变的空白边距。可以改用 flex 和 justify-between 来解决此问题。参考代码：

@supports (scrollbar-gutter: stable) {
    .mobile-menu-head {
        scrollbar-gutter: stable;
    }
}

@supports not (scrollbar-gutter: stable) {
    .mobile-menu-head {
        overflow-y: scroll;
    }
}<br>

解决 overflow: hidden 时的页面跳动问题

使用 scrollbar-gutter: stable（推荐）

当一个容器使用 overflow-y: auto 时，内容溢出导致滚动条突然出现会挤占内部宽度，从而引发布局“抖动”。解决此问题的最佳现代CSS方案是为该容器应用 scrollbar-gutter: stable; 属性，它能强制浏览器始终为滚动条预留出空间，即使内容未溢出时也是如此，从而确保了内容区域的宽度恒定不变。为兼容旧版浏览器，可以通过 @supports 查询提供 overflow-y: scroll; 作为降级方案，它也能通过强制显示滚动条轨道来达到同样稳定宽度的效果，彻底根除抖动问题。

动态内边距补偿

这是一种高级前端技巧，用于解决因隐藏页面滚动条而导致的“内容跳动”问题。其核心原理是：在通过 overflow: hidden 禁用滚动前，先用 window.innerWidth – document.documentElement.clientWidth 精确计算出滚动条的宽度，然后在隐藏滚动条的同时，将这个宽度值作为 padding-right 动态应用到 <body> 元素以及所有 position: fixed 或 sticky 的元素（如固定的导航栏）上。这样，即使滚动条消失了，其所占空间也被内边距完美“补偿”，维持了页面内容区的总宽度不变，从而彻底避免了布局的跳动。当恢复滚动时，只需移除这些内联样式即可。