Tailwind CSS中w-0状态下如何防止侧边滑入模态框溢出页面

问题表现 #

使用w-0作为从右滑入模态框的收起状态宽度时，模态框内部内容溢出显示在主页面上，效果如下：

初始出问题的模态框根容器代码：

<div
      className={`flex flex-col absolute right-0 top-0 h-full min-h-screen transition-width ease-in-out duration-300"  
        ${showModal ? 'w-144' : 'w-0'} 
        `}
    >

问题根因 #

• 语法错误：根容器className里duration-300后多了一个多余的双引号，导致Tailwind类名解析异常，部分样式失效
• 样式缺失：控制宽度变化的模态框根容器没有设置overflow-hidden，当容器宽度为0时，浏览器默认不会裁剪内部溢出的内容，直接显示在容器外
• 之前排查时把overflow-hidden加在了子内容区，只能裁剪对应子元素的内容，顶部绿色导航栏依然会溢出，没有作用到真正的边界容器上

修复方案 #

1. 删掉根容器className里多余的引号
2. 给宽度动画的根容器添加overflow-hidden属性，强制裁剪超出容器边界的内容
3. 把transition-width替换为transition-all，避免自定义宽度值w-144无法被宽度过渡规则识别导致动画异常

修复后的根容器代码：

<div
  className={`flex flex-col absolute right-0 top-0 h-full min-h-screen transition-all ease-in-out duration-300 overflow-hidden
    ${showModal ? 'w-144' : 'w-0'} 
  `}
>

如果需要避免动画过程中内容和底层页面透叠，可以给根容器加对应背景色，比如白色就加bg-white即可。

内容的提问来源于stack exchange，提问作者user14749773