NextJS да Tailwind билан ишлаш

NextJS да стиллаш учун CSS фреймворги Tailwind дан фойдаланиш мумкин, у кўпинча React билан бирга ишлатилади. Келинг, уни қандай ишлатишни кўриб чиқайлик.

Tailwind стиллари билан ишлаш учун иккита файл зарур: tailwind.config.js ва postcss.config.js. Лойихани ўрнатиш жараёнида биз томонимиздан "Tailwind стилларидан фойдаланиш" бандлиги танлангани сабабли, бу файллар аллакачон яратилган ва лойиханинг илдизида жойлашган. Агар бундай файллар бўлмаса, у ҳолда сиз Tailwind ни расмий ҳужжатлар га мувофиқ ўрнатишингиз керак.

Келинг, абзацдаги матнга қора ёзув ва сариқ рангни Tailwind стиллари ёрдамида қўшайлик. Tailwind CSS да ранглар учун ишлатиладиган сонлар рангнинг қуввати ёки соясини ифодалайди. Бу сонлар 50 дан 900 гача бўлади. Матн учун ўртача сояни танлаймиз:

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