I have 9 buttons with grid layout of grid-cols-2 so the last one remaining button will be left out as 1 . So I want that button to take the span of col 2 in tailwind

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>

Styles work for all buttons and but for the last button, when u Remove the style class of .btn and add col span , it works but when I use both ,only style works not col-span , i’m sorry for my bad English..