Tailwindi kasutamine NextJS-is

NextJS-is stiilimiseks saab kasutada CSS-i raamistikku Tailwind, mida kasutatakse sageli koos Reactiga. Vaatame, kuidas seda kasutada.

Tailwindi stiilidega töötamiseks on vaja kahte faili: tailwind.config.js ja postcss.config.js. Kuna projekti installimisel valisime me punkti "kasuta Tailwindi stiile", need failid on juba genereeritud meie projektis ja asuvad selle juurkaustas. Kui selliseid faile pole, peate installima Tailwindi vastavalt ametlikule dokumentatsioonile.

Lisame rasvu kuju ja kollase värvi teksti lõigule kasutades Tailwindi stiile. Tailwind CSS-is numbrid, mida kasutatakse klassides värvide jaoks, tähistavad värvi intensiivsust või tooni. Need numbrid varieeruvad 50 kuni 900. Teksti lõigu jaoks valime keskmise tooni:

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