Penggunaan Tailwind dalam NextJS

Dalam NextJS, untuk penggayaan, anda boleh menggunakan rangka kerja CSS Tailwind, yang sering digunakan bersama-sama dengan React. Mari kita lihat cara menggunakannya.

Untuk bekerja dengan gaya Tailwind, dua fail diperlukan: tailwind.config.js dan postcss.config.js. Memandangkan semasa pemasangan projek, kami telah memilih pilihan "gunakan gaya Tailwind", fail-fail ini telah dijana dalam projek kami dan berada di akarnya. Jika fail-fail tersebut tiada, anda perlu memasang Tailwind mengikut dokumentasi rasmi.

Mari tambahkan gaya tebal dan warna kuning pada teks dari perenggan menggunakan gaya Tailwind. Dalam Tailwind CSS, nombor, yang digunakan dalam kelas untuk warna menunjukkan intensiti atau rona warna. Nombor-nombor ini berjulat dari 50 hingga 900. Untuk teks perenggan, pilih rona sederhana:

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