NextJS da Tailwind bilan ishlash

NextJS da uslublash uchun CSS frameworki Tailwind dan foydalanish mumkin, u ko'pincha React bilan birga ishlatiladi. Keling, undan qanday foydalanishni ko'rib chiqaylik.

Tailwind uslublari bilan ishlash uchun ikkita fayl kerak: tailwind.config.js va postcss.config.js. Loyihani o'rnatish paytida bizga "Tailwind uslublaridan foydalanish" bandi tanlanganligi sababli, ushbu fayllar allaqachon yaratilgan va loyihaning ildizida joylashgan. Agar bunday fayllar bo'lmasa, siz Tailwind ni rasmiy hujjatlarga muvofiq o'rnatishingiz kerak.

Keling, abzats matniga qora rang va sariq rang qo'shamiz Tailwind uslublari yordamida. Tailwind CSS da raqamlar, ranglar uchun klasslarda ishlatilganda rangning intensivligi yoki tonini bildiradi. Ushbu raqamlar 50 dan 900 gacha o'zgaradi. Abzats matni uchun o'rta tonni tanlaymiz:

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