NextJS-এ Tailwind এর সাথে কাজ
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">
text text text
</p>;
}
আপনার প্রকল্পে Tailwind স্টাইল ব্যবহার করে দেখুন।
