I have a grid layout with 9 buttons using grid-cols-2, leaving the last button in a single column. I want that final button to span across both columns using Tailwind CSS.
Code for .btn :
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.btns {
@apply bg-black w-64 h-14 text-white;
}
}
Code :
<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>
The styling works for all buttons, but when trying to apply col-span to the last button alongside the style class .btn, only the style is applied and not the col-span. Apologies for any language errors on my part.