TailwindCSS v2宽度过渡不生效，React项目如何实现宽度平滑切换？

问题描述 #

在React项目中使用TailwindCSS v2，通过useState Hook控制div宽度切换，宽度能正常变化，但添加过渡类后效果仍是瞬间完成，无法实现平滑过渡。

原组件代码 #

import React, {useState} from 'react';

function Sidebar() {
  
  const [showMenuIcons, setshowMenuIcons] = useState(false);
  
    return (
      <div className={`h-fit bg-white shadow-lg border-l-2 relative z-10 ${showMenuIcons ? "w-fit transition-width duration-1000 ease-in-out" : "w-1/2 transition-width duration-1000 ease-in-out"} transition-width duration-1000 ease-in-out`} onClick={()=>{setshowMenuIcons(true)}}>
        <p>lorem Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    );
  
}

export default Sidebar;

原tailwind.config.js配置 #

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false,
  theme: {
    extend: {
      transitionProperty: {
        'width': 'width'
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

问题原因 #

CSS过渡要求过渡的属性值是可计算的具体数值，你当前切换的是w-fit（自适应内容宽度，属于关键字值）和w-1/2（百分比数值），这两种类型的值之间无法计算过渡差值，浏览器只能直接跳变，所以过渡不生效。

解决方案 #

方案一：使用具体数值类替代w-fit #

把w-fit换成固定宽度或百分比类（比如w-64、w-3/4），让切换前后都是数值型宽度，这样就能正常触发过渡：

修改后的组件代码：

import React, {useState} from 'react';

function Sidebar() {
  
  const [showMenuIcons, setshowMenuIcons] = useState(false);
  
  return (
    <div 
      className={`h-fit bg-white shadow-lg border-l-2 relative z-10 transition-width duration-1000 ease-in-out ${showMenuIcons ? "w-64" : "w-1/2"}`} 
      onClick={()=>{setshowMenuIcons(true)}}
    >
      <p>lorem Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  );
  
}

export default Sidebar;

方案二：通过max-width实现自适应宽度过渡 #

如果必须保留自适应宽度的效果，可以用max-width来实现过渡，初始状态设置固定宽度和max-width，切换时修改max-width为自适应值：

步骤1：修改组件代码

import React, {useState} from 'react';

function Sidebar() {
  
  const [showMenuIcons, setshowMenuIcons] = useState(false);
  
  return (
    <div 
      className={`h-fit bg-white shadow-lg border-l-2 relative z-10 transition-all duration-1000 ease-in-out ${showMenuIcons ? "max-w-fit w-auto" : "max-w-1/2 w-1/2"}`} 
      onClick={()=>{setshowMenuIcons(true)}}
    >
      <p>lorem Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  );
  
}

export default Sidebar;

步骤2：更新tailwind配置（可选，用transition-all可跳过）

如果不用transition-all，可以单独配置max-width的过渡属性：

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false,
  theme: {
    extend: {
      transitionProperty: {
        'width': 'width',
        'max-width': 'max-width'
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

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