Tailwind CSS on CSS-kehys, joka tarjoaa kokoelman matalan tason apuluokkia. Näitä luokkia voidaan lisätä suoraan merkkauskoodiin, jolloin ulkoasuja voidaan luoda ilman, että CSS-koodia tarvitsee kirjoittaa alusta asti. Tailwindin keskeinen ajatus on, että lisäämällä sopivat luokat elementteihin, voidaan tarvittavat tyylit määrittää helposti.

Esimerkiksi:

<button class="bg-green-600 text-white px-4 py-2 rounded">Green button</button>

Button-elementillä on vihreä tausta ja valkoinen teksti. Lisäksi siinä on täyte ja pyöristetyt kulmat.

Takaisin projektiin

Lisätään vielä yksi elementti sovellukseemme Tailwind-tyylityksellä. Kopioi alla oleva div-elementti ja liitä se p-elementin yläpuolelle tiedostossa app/page.tsx.

Kun olet tehnyt muutokset, tallenna ne ja tarkista sivu livenä. Näet nyt valkoisen pyöreän muodon.

Käytännössä