Tailwind CSS Flex布局导致图标过度缩小的问题求助

问题根源 #

1. Tailwind类名语法错误：Icon组件外层div的w=[48px]是错误写法，Tailwind自定义尺寸的正确格式是w-[48px]（方括号直接包裹数值，不用等号），这个错误导致父容器没有正确设置宽度，图标失去了稳定的尺寸参考，自然被过度压缩。
2. 图标尺寸依赖失效：图标用w-1/2 h-1/2基于父容器比例设置尺寸，但父容器宽度没生效，比例计算就会出现异常，导致图标缩小。

修复方案 #

1. 修正父容器类名 #

把Icon组件里的w=[48px]改成w-[48px]，同时明确添加h-[48px]，给父容器固定宽高，让图标比例计算有可靠的基准。

2. 优化图标显示（可选） #

可以给图标加object-contain类，避免图标被拉伸变形；如果想要更稳定的尺寸，也可以把w-1/2 h-1/2换成固定尺寸类（比如w-6 h-6）。

修复后的完整代码 #

const Icon = ({ styles, name, imgUrl, isActive, disabled, handleClick }) => (
    <div className={`w-[48px] h-[48px] rounded-[10px] ${isActive && isActive === name && 'bg-[#2c2f32]'} flex justify-center items-center ${!disabled && 'cursor-pointer'} ${styles}` } onClick={handleClick}>
        {!isActive ? (
            <img src={imgUrl} alt="fund-logo" className='w-1/2 h-1/2 object-contain' />
        ) : (
            <img src={imgUrl} alt="fund-logo" className={`w-1/2 h-1/2 object-contain ${isActive !== name && 'grayscale'}`} />
        )}
    </div>
)

const Sidebar = () => {
    const navigate = useNavigate();
    const [ isActive, setIsActive] = useState('dashboard');
    return (
        <div className='flex justify-between items-center flex-col sticky top-5 h-[93vh]'>
            <Link to="/">
                <Icon styles="w-[52px] h-[52px] bg-[#2c2f32]" imgUrl={logo} />
            </Link>
            <div className='flex-1 flex flex-col justify-between items-center bg-[#1c1c24] rounded-[20px] w-[76px] py-4 mt-12'>
                <div className='flex flex-col justify-center items-center gap-3'>
                    {navlinks.map((link) => (
                        <Icon 
                            key={link.name}
                            {...link}
                            isActive={isActive}
                            handleClick={() => {
                                if(!link.disabled) {
                                    setIsActive(link.name);
                                    navigate(link.link);
                                }
                            }} 
                        />
                    ))}
                </div>
            </div>
        </div>
    )
}

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