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 स्टाइल्स का उपयोग करने का प्रयास करें।
