Tailwind használata NextJS-ben

A NextJS-ben a stílusokhoz használhatjuk a Tailwind CSS keretrendszert, amelyet gyakran használnak React-tel együtt. Nézzük meg, hogyan kell használni.

A Tailwind stílusokhoz két fájlra van szükség: tailwind.config.js és postcss.config.js. Mivel a projekt telepítésekor a "Tailwind stílusok használata" pontot választottuk, ezek a fájlok már generálva lettek a projektünkben és a gyökerében találhatók. Ha ezek a fájlok nem léteznek, akkor a Tailwind-et a hivatalos dokumentáció szerint kell telepíteni.

Adjunk félkövér stílust és sárga színt a bekezdés szövegéhez a Tailwind stílusok segítségével. A Tailwind CSS-ben a számok, amelyeket a színek osztályaiban használnak, a szín intenzitását vagy árnyalatát jelölik. Ezek a számok 50 és 900 között változnak. A szöveghez válasszunk egy közepes árnyalatot:

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