TailwindCSS切换自定义宽度时transition过渡效果不生效如何解决

问题根因 #

• 第一种方案失败：Tailwind JIT 编译模式只会打包源码中静态扫描到的工具类，你通过JS动态插入的w-[300px]没有提前出现在静态代码中，Tailwind 不会生成对应CSS规则，切换类自然无效。
• 第二种方案失败：你把scale-x-[3.75]写死在静态className里，元素初始就已经被拉伸，切换transform类没有任何实际属性变更，当然不会触发过渡；另外默认缩放原点是元素中心，直接缩放会导致导航整体位移，还会拉伸内部内容。

可行解决方案 #

方案1：状态驱动宽度类切换（最推荐，适配导航折叠场景） #

不要手动操作DOM切换类，用React状态控制类名，确保两个宽度类都会被Tailwind扫描生成：

import { useState } from 'react'

// 组件内代码
const [isExpanded, setIsExpanded] = useState(false)

const toggle = () => setIsExpanded(!isExpanded)

return (
  <>
    <div 
      className={`relative h-[420px] bg-white rounded-[10px] overflow-hidden shadow-sidebar transition-all duration-500 ${isExpanded ? 'w-[300px]' : 'w-[80px]'}`}
    >
    ...
    </div>
    <div
      onClick={toggle}
      className='toggle absolute top-1/2 -translate-y-1/2 right-[-20px] w-[40px] h-[40px] bg-[#f5f5f5] cursor-pointer border-[5px] border-[#6843d1] rounded-full' 
    />
  </>
)

注：如果你的Tailwind版本低于3.0，要确保tailwind.config.js中开启了JIT模式。

方案2：transform缩放实现（性能更好，适合不需要内容自适应宽度的场景） #

调整缩放逻辑，控制缩放类的切换，同时配置缩放原点避免位移，可加子元素反向缩放抵消内容拉伸：

const [isExpanded, setIsExpanded] = useState(false)
const toggle = () => setIsExpanded(!isExpanded)

return (
  <div 
    className={`relative w-[80px] h-[420px] bg-white rounded-[10px] overflow-hidden shadow-sidebar transition-all duration-500 origin-left ${isExpanded ? 'scale-x-[3.75]' : ''}`}
  >
    {/* 子元素反向缩放抵消拉伸，保证内容不变形 */}
    <div className={`transition-all duration-500 ${isExpanded ? 'scale-x-[0.2667] origin-left w-[300px]' : ''}`}>
      ...导航内容
    </div>
  </div>
)

方案3：自定义CSS变量控制宽度 #

如果需要更灵活的宽度控制，可通过CSS变量实现：
先在全局CSS中注册自定义属性（可选，不注册的话部分浏览器不支持过渡自定义变量）：

@property --nav-width {
  syntax: '<length>';
  initial-value: 80px;
  inherits: false;
}

组件代码：

const [isExpanded, setIsExpanded] = useState(false)
const toggle = () => setIsExpanded(!isExpanded)

return (
  <div 
    className="relative h-[420px] bg-white rounded-[10px] overflow-hidden shadow-sidebar transition-[--nav-width] duration-500"
    style={{ '--nav-width': isExpanded ? '300px' : '80px', width: 'var(--nav-width)' }}
  >
  ...
  </div>
)

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