Tailwind-ის გამოყენება NextJS-ში

NextJS-ში სტილიზაციისთვის შეგიძლიათ გამოიყენოთ CSS ფრეიმვორკი Tailwind, რომელიც ხშირად გამოიყენება React-თან ერთად. მოდით ვნახოთ, როგორ გამოვიყენოთ იგი.

Tailwind-თან მუშაობისთვის საჭიროა ორი ფაილი: tailwind.config.js და postcss.config.js. ვინაიდან პროექტის დაყენებისას ჩვენ ავირჩიეთ პუნქტი "Tailwind-ის სტილების გამოყენება", ეს ფაილები უკვე გენერირებულია ჩვენს პროექტში და მდებარეობს მის ძირში. თუ ასეთი ფაილები არ არის, თქვენ უნდა დააინსტალიროთ Tailwind ოფიციალური დოკუმენტაციის მიხედვით.

მოდით, პარაგრაფის ტექსტს დავუმატოთ მსხვილი შრიფტი და ყვითელი ფერი Tailwind-ის სტილების საშუალებით. Tailwind CSS-ში რიცხვები, რომლებიც გამოიყენება ფერების კლასებში, ნიშნავს ფერის ინტენსივობას ან ტონს. ეს რიცხვები მერყეობს 50-დან 900-მდე. ტექსტის პარაგრაფისთვის ავირჩიოთ საშუალო ტონი:

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

სცადეთ Tailwind-ის სტილების გამოყენება თქვენს პროექტში.