Delo s Tailwind v NextJS

V NextJS lahko za stilizacijo uporabimo CSS ogrodje Tailwind, ki se pogosto uporablja skupaj z React. Poglejmo, kako ga uporabljati.

Za delo s slogi Tailwind sta potrebni dve datoteki: tailwind.config.js in postcss.config.js. Ker smo med namestitvijo projekta izbrali možnost "uporabi sloge Tailwind", sta ti datoteki že generirani v našem projektu in se nahajata v njegovem korenu. Če teh datotek ni, morate namestiti Tailwind v skladu z uradno dokumentacijo.

Dodajmo krepko pisavo in rumeno barvo besedilu iz odstavka s pomočjo slogov Tailwind. V Tailwind CSS številke, uporabljene v razredih za barve označujejo intenzivnost ali odtenek barve. Te številke segajo od 50 do 900. Za besedilo odstavka izberimo srednji odtenek:

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