Rad sa Tailwind u NextJS

U NextJS za stilizaciju možete koristiti CSS frejmvork Tailwind, koji se često koristi zajedno sa React. Hajde da pogledamo kako se njime koristiti.

Za rad sa stilovima Tailwind su potrebne dve datoteke: tailwind.config.js i postcss.config.js. Pošto je prilikom instalacije projekta od nas izabrana opcija "koristiti stilove Tailwind", ove datoteke su već generisane u našem projektu i nalaze se u njegovom korenu. Ako ovakvih datoteka nema, onda morate da instalirate Tailwind prema zvaničnoj dokumentaciji.

Hajde da dodamo podebljano oblikovanje i žutu boju tekstu iz pasusa koristeći stilove Tailwind. U Tailwind CSS brojevi, korišćeni u klasama za boje označavaju intenzitet ili nijansu boje. Ovi brojevi variraju od 50 do 900. Za tekst pasusa izabraćemo srednju nijansu:

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