Bekerja dengan Tailwind di NextJS

Di NextJS, untuk penataan gaya, Anda dapat menggunakan framework CSS Tailwind, yang sering digunakan bersama dengan React. Mari kita lihat cara menggunakannya.

Untuk bekerja dengan gaya Tailwind, diperlukan dua file: tailwind.config.js dan postcss.config.js. Karena saat menginstal proyek, kami memilih opsi "gunakan gaya Tailwind", file-file ini telah dihasilkan di proyek kami dan berada di root-nya. Jika file-file tersebut tidak ada, maka Anda perlu menginstal Tailwind sesuai dengan dokumentasi resmi.

Mari tambahkan ketebalan tebal dan warna kuning ke teks dari paragraf menggunakan gaya Tailwind. Di Tailwind CSS, angka, yang digunakan dalam kelas untuk warna menunjukkan intensitas atau corak warna. Angka-angka ini bervariasi dari 50 hingga 900. Untuk teks paragraf, mari pilih corak sedang:

export default function Test() {
	return <p className="font-bold text-yellow-500">
		text text text
	</p>;
}

Coba gunakan gaya Tailwind di proyek Anda.