NextJS-də Tailwind ilə iş

NextJS-də stilizasiya üçün tez-tez React ilə birlikdə istifadə olunan CSS freymvorku Tailwind-dən istifadə edə bilərsiniz. Gəlin ondan necə istifadə edəcəyimizə baxaq.

Tailwind stiləri ilə işləmək üçün iki fayl lazımdır: tailwind.config.js və postcss.config.js. Layihəni quraşdıranda biz tərəfindən "Tailwind stillərindən istifadə et" maddəsi seçildiyi üçün, bu fayllar artıq yaradılıb bizim layihəmizdə və onun kök qovluğunda yerləşir. Əgər belə fayllar yoxdursa, onda Tailwind-i quraşdırmalısınız rəsmi sənədləşməyə uyğun olaraq.

Gəlin, Tailwind stillərindən istifadə edərək, abzasdakı mətnə qalın yazı stilini və sarı rəngi əlavə edək. Tailwind CSS-də rənglər üçün siniflərdə istifadə olunan rəqəmlər rəngin intensivliyini və ya çalarını göstərir. Bu rəqəmlər 50-dən 900-dək dəyişir. Mətn üçün orta çalı seçək:

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