Darbas su Tailwind NextJS

NextJS stiliams kurti galima naudoti CSS framework'ą Tailwind, kuris dažnai naudojamas kartu su React. Pažiūrėkime, kaip juo naudotis.

Norint dirbti su Tailwind stiliais, reikalingi du failai: tailwind.config.js ir postcss.config.js. Kadangi diegiant projektą buvo pasirinktas punktas "naudoti Tailwind stilius", šie failai jau sugeneruoti mūsų projekte ir yra jo šakniniame kataloge. Jei tokių failų nėra, tuomet reikia įdiegti Tailwind pagal oficialią dokumentaciją.

Pridėkime pusjuodį šriftą ir geltoną spalvą tekstui iš pastraipos naudodami Tailwind stilius. Tailwind CSS skaičiai, naudojami spalvų klasėse, nurodo intensyvumą arba atspalvį. Šie skaičiai svyruoja nuo 50 iki 900. Teksto pastraipai pasirinkime vidutinį atspalvį:

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