TailwindCSS宽度未按设置值生效：循环组件与直接渲染差异问题

我在使用TailwindCSS时遇到以下问题：将带有w-[300px] h-[300px]样式的元素封装为CardComponent组件后，通过循环渲染该组件时，元素宽度未匹配设置值；但在Page.tsx中直接渲染相同样式的元素时显示正常，想请教该问题的原因。

CardComponent代码 #

type Props = {
  img: string;
  title: string;
  content: string;
  color: string;
};

export default function CardComponent({
  img,
  title,
  content,
  color,
}: Props) {
  return (
    <>
      <div className={`container bg-orange-700 w-[300px] h-[300px]`}></div>
    </>
  );
}

Page.tsx代码 #

export default function Home() {
  return (
    <main>
      <div className="flex flex-nowrap p-5 gap-5">
        {posts.map((post) => (
          <CardComponent
            key={post.title}
            img={post.img}
            title={post.title}
            content={post.content}
            color={post.color}
          />
        ))}
      </div>
      <div className="flex flex-nowrap p-5 gap-5">
        <div className={`container bg-orange-700 w-[300px] h-[300px]`}></div>
      </div>
    </main>
  );
}

样式差异截图 #

问题根源在于你给CardComponent内部的div添加了Tailwind的container类。这个类的作用是创建响应式容器，它会根据当前屏幕尺寸自动设置元素的最大宽度（max-width），而这个max-width样式的优先级会覆盖你手动设置的w-[300px]，导致组件渲染时元素宽度被限制为container类对应的最大宽度，而非你想要的300px。

Page.tsx中直接渲染的div虽然也加了container，但可能因为单次渲染时的样式计算逻辑，或者你当前屏幕尺寸下container的max-width刚好等于或大于300px，所以暂时显示正常——但这是巧合，一旦屏幕尺寸变化，这个直接渲染的div也会出现宽度不符合预期的问题。

解决办法 #

1. 移除不必要的container类（推荐）
   既然你已经明确设置了固定宽高，完全不需要响应式容器的特性，直接去掉container类即可：

   // 修改后的CardComponent
   export default function CardComponent({
     img,
     title,
     content,
     color,
   }: Props) {
     return (
       <>
         <div className={`bg-orange-700 w-[300px] h-[300px]`}></div>
       </>
     );
   }
   

2. 强制优先级覆盖
   如果你确实需要保留container类，可以使用Tailwind的!前缀强制让宽度样式生效：

   <div className={`container bg-orange-700 !w-[300px] h-[300px]`}></div>
   

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