Praca z Tailwind w NextJS

W NextJS do stylizacji można używać frameworka CSS Tailwind, który jest często używany razem z React. Przyjrzyjmy się, jak go używać.

Do pracy ze stylami Tailwind potrzebne są dwa pliki: tailwind.config.js i postcss.config.js. Ponieważ podczas instalacji projektu wybraliśmy opcję "używać stylów Tailwind", te pliki są już wygenerowane w naszym projekcie i znajdują się w jego głównym katalogu. Jeśli takich plików nie ma, to trzeba zainstalować Tailwind zgodnie z oficjalną dokumentacją.

Dodajmy pogrubienie i żółty kolor tekstu z akapitu za pomocą stylów Tailwind. W Tailwind CSS liczby, używane w klasach dla kolorów oznaczają intensywność lub odcień koloru. Te liczby wahają się od 50 do 900. Dla tekstu akapitu wybierzmy średni odcień:

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