Lucrul cu Tailwind în NextJS

În NextJS, pentru stilizare poți folosi framework-ul CSS Tailwind, care este folosit frecvent împreună cu React. Să vedem cum să-l folosim.

Pentru lucrul cu stilurile Tailwind sunt necesare două fișiere: tailwind.config.js și postcss.config.js. Deoarece la instalarea proiectului am ales punctul "să folosim stilurile Tailwind", aceste fișiere sunt deja generate în proiectul nostru și se află în rădăcina acestuia. Dacă aceste fișiere nu există, atunci trebuie să instalați Tailwind conform documentației oficiale.

Să adăugăm stilul aldine și culoarea galbenă textului din paragraf cu ajutorul stilurilor Tailwind. În Tailwind CSS, numerele folosite în clasele pentru culori indică intensitatea sau nuanța culorii. Aceste numere variază de la 50 până la 900. Pentru textul paragrafului, vom alege o nuanță medie:

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