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ń:
export default function Test() {
return <p className="font-bold text-yellow-500">
text text text
</p>;
}
Spróbuj użyć stylów Tailwind w swoim projekcie.
