Next.js+Tailwind开发中自动添加width:0px导致宽度失效问题求助

问题分析 #

你遇到的情况是：动态设置的Tailwind宽度类（w-${accord.size}）被浏览器自动添加的行内width:0px覆盖，导致宽度不生效。这个行内样式大概率是项目中其他代码（比如父组件逻辑、第三方UI库、自定义Hook）注入的，并非Tailwind或Next.js的默认行为。

排查步骤 #

• 用React DevTools定位样式来源：打开React DevTools找到目标div组件，查看style属性的设置源头——可能是父组件传递的props被合并，或是某个useEffect/useLayoutEffect里的代码动态修改了样式。
• 检查第三方组件依赖：如果该div被UI组件（如MUI、Ant Design等）包裹，这类组件可能会根据自身逻辑注入行内样式，可查看组件文档是否有禁止该行为的配置项。
• 搜索项目样式修改代码：全局搜索项目中是否存在针对该div设置width的代码，排查是否有函数在动态更新元素样式时误加了width:0px。

快速解决办法 #

如果暂时找不到样式注入的根源，可以通过以下方式强制让Tailwind的宽度生效：

1. 行内样式显式覆盖width

在style属性中添加width: 'unset'，直接覆盖自动注入的width:0px：

style={{ 
  backgroundColor: accordsData[accord.accord].color,
  width: 'unset' 
}}

2. 使用Tailwind的!important变体

给宽度类加上!后缀，让Tailwind生成的样式带!important优先级，覆盖行内样式：

className={`text-center w-${accord.size}! rounded-r-2xl`}

注意：!important会提升样式优先级，尽量只在应急场景使用，长期来看还是建议找到样式注入的根源彻底解决。

3. 确认Tailwind自定义宽度配置（可选）

如果accord.size是自定义数值（比如100），需要确保Tailwind配置中包含对应的宽度值，否则类名虽存在但不会生成有效样式：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      width: {
        '100': '25rem', // 根据你的需求设置对应数值
      }
    }
  }
}

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