Tailwind CSS中col-span与自定义组件类共存时失效问题求助

我有9个按钮，采用Grid布局（实际代码设置为grid-cols-4），最后一个按钮需要占据2列宽度。但同时添加col-span-2和自定义.btns类时，col-span属性失效；仅添加col-span-2时正常生效。所有按钮的样式均正常，只有最后一个的列宽设置不生效。

相关代码 #

自定义CSS类 #

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btns {
    @apply bg-black w-64 h-14 text-white;
  }
}

页面HTML代码 #

<div class="text-black text-62">
  <p>SHOP</p>
</div>

<div class="flex justify-around items-center">
  <div class="grid grid-cols-4 gap-3">
    <button class="btns">TRULY WIRELESS EARBUDS</button>
    <button class="btns">PREMIUM TWS</button>
    <button class="btns">NEW TWS</button>
    <button class="btns">HEADPHONES</button>
    <button class="btns">GAMING</button>
    <button class="btns">EARBUDS</button>
    <button class="btns">DIME FAMILY</button>
    <button class="btns">BUDGET TWS</button>
    <button class="col-span-2 btns">ANC TWS</button>
  </div>
</div>

原因分析 #

问题出在.btns类里的w-64固定宽度设置。Grid布局的col-span-2是让网格项占据指定数量的网格列宽度，但固定宽度会优先于Grid的列分配逻辑，强制按钮保持w-64的宽度，导致col-span-2的列合并效果无法体现。

解决方案 #

方案一：移除固定宽度 #

删掉.btns中的w-64，让按钮宽度由Grid布局自动分配，col-span-2就能正常生效：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btns {
    @apply bg-black h-14 text-white;
  }
}

方案二：改用自适应宽度 #

如果需要按钮填充所在网格列的宽度，把w-64换成w-full，既保证样式统一，又不影响Grid的列合并逻辑：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btns {
    @apply bg-black w-full h-14 text-white;
  }
}

方案三：调整类顺序（不推荐） #

若必须保留w-64，可尝试将col-span-2放在.btns后面，利用CSS优先级让Grid样式覆盖固定宽度，但这种方式不稳定，优先推荐前两种方案：

<button class="btns col-span-2">ANC TWS</button>

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