NextJS'te Tailwind ile Çalışmak

NextJS'te stil vermek için, React ile sıklıkla kullanılan CSS framework'ü Tailwind'i kullanabilirsiniz. Hadi nasıl kullanılacağına bir göz atalım.

Tailwind stilleri ile çalışmak için iki dosyaya ihtiyaç vardır: tailwind.config.js ve postcss.config.js. Projeyi kurarken "Tailwind stillerini kullan" seçeneği seçildiği için, bu dosyalar projemizde zaten oluşturulmuş durumda ve projenin kök dizininde bulunuyorlar. Eğer bu dosyalar yoksa, Tailwind'i resmi dokümantasyona göre kurmanız gerekmektedir.

Şimdi, bir paragraftaki metne Tailwind stillerini kullanarak koyu kalınlık ve sarı renk ekleyelim. Tailwind CSS'te, renkler için sınıflarda kullanılan sayılar rengin yoğunluğunu veya tonunu belirtir. Bu sayılar 50 ile 900 arasında değişir. Paragraf metni için orta bir ton seçelim:

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