Práca s Tailwind v NextJS

V NextJS pre štýlovanie môžete použiť CSS framework Tailwind, ktorý sa často používa spolu s Reactom. Pozrime sa, ako ho používať.

Pre prácu so štýlmi Tailwind sú potrebné dva súbory: tailwind.config.js a postcss.config.js. Keďže pri inštalácii projektu sme vybrali možnosť "použiť štýly Tailwind", tieto súbory sú už vygenerované v našom projekte a nachádzajú sa v jeho koreni. Ak takéto súbory neexistujú, musíte nainštalovať Tailwind podľa oficiálnej dokumentácie.

Pridajme polotučné písmo a žltú farbu textu odseku pomocou štýlov Tailwind. V Tailwind CSS čísla, používané v triedach pre farby označujú intenzitu alebo odtieň farby. Tieto čísla sa pohybujú od 50 do 900. Pre text odseku vyberme stredný odtieň:

app/test/page.jsxexport default function Test() {
  return <p className="font-bold text-yellow-500">
    text text text
  </p>;
}