如何在NextJS+Tailwind CSS中限制元素宽度匹配背景图宽度？

问题描述 #

基于 NextJS 和 Tailwind CSS 开发的应用中，背景图尺寸为 800px（宽）× 691px（高），尝试将元素宽度限制为背景图宽度时，设置 w=[800px] 无效果，添加 flex-grow-0 也未能解决问题。

问题根源 #

1. Tailwind 类语法错误：w=[800px] 是错误写法，正确的自定义宽度类应为 w-[800px]（方括号直接跟在类名后，无等号）。
2. Flex 基础宽度冲突：父容器 maincolumns 是 flex 布局，子元素 field 设置了 basis-2/3，这个类会强制元素占据父容器 2/3 的宽度，覆盖了自定义宽度的设置。

修复后的代码 #

export default function Example() {
    return (
      <div id="main" className="container mx-auto p-4 bg-sky-200">
        <div id="maincolumns" className="flex">
          <div id="playerlist" className="basis-1/3 bg-orange-300">
            List of players_
          </div>
          <div id="field" className="flex flex-grow-0 bg-football-field bg-no-repeat bg-contain h-[691px] w-[800px] justify-center">
            <div id="positions" className="grid grid-rows-4 max-h-full w-full">
              <div id="goalkeeper" className="flex bg-gray-100">GK</div>
               <div id="defenders" className="flex bg-orange-100">
                <div>DF</div>
                <div>DF</div>
                <div>DF</div>
                <div>DF</div>
              </div>
               <div id="midfielders" className="flex bg-red-300">
                <div>MF</div>
                <div>MF</div>
                <div>MF</div>
                <div>MF</div>
              </div>
               <div id="forwards" className="flex bg-green-100">
                <div>FW</div>
                <div>FW</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }

关键修改点 #

• 修正宽度类：将 w=[800px] 改为 w-[800px]
• 移除冲突类：删除 basis-2/3，避免强制占据父容器 2/3 宽度
• 优化子元素布局：给 positions 添加 w-full，让其填满 field 的宽度，保证内部位置块正常排列

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