header class="sticky top-0 bg-gray-400"
    ul class="flex justify-around list-none text-[#d90b8d] h-10"

    
<div class="grid grid-cols-4 gap-2 p-2 bg-slate-500 text-center h-32 [&>*]:border-4 [&>*]:border-solid">
  <div><PGrid white>01</PGrid></div>
  <div class="bg-slate-300"><PGrid>02</PGrid></div>
  <div><PGrid white>03</PGrid></div>
  <div class="bg-slate-300"><PGrid>04</PGrid></div>
  <div class="bg-slate-300 col-span-3"><PGrid>05</PGrid></div>
  <div><PGrid white>06</PGrid></div>
</div>

Med Tailwind kan man använda sig av små klasser som gör en viss sak.

Knappen nedanför använder sig av fem klasser:

• w-32 (ställer in bredden, samma sak som width: 8rem;)

• h-12 (ställer in höjden, samma sak som height: 3rem;

• bg-green-600 (ställer in bakgrundsfärgen, finns en mängd olika färger där man kan ändra t.ex 600 till 50-900)

• hover:bg-green-400 (lägger till en färg som visas vid hover)

• rounded (ställer in hur rund man vill ha, samma sak som border-radius: 0.25rem;)

Klicka här!

    <button class="w-32 h-12 bg-green-600 hover:bg-green-400 rounded">Klicka här!</button>

Exempel: ändra styling

En fördel är att man enkelt kan ändra på sin styling genom att ändra på klasserna.

Har bara ändrat bg-green till bg-pink!

Exempel: komponenter i JS-ramverk

För att undvika repeterade klasser för alla html-element kan man använda sig av komponenter i javascript-ramverket man använder för att kunna ändra på klasserna på ett ställe.

Man kan också skicka med en variabel som ändrar på komponenten i logiken.

Tailwind Cheat-sheet