🌈Tailwind रंग जनरेटर

Tailwind के 50-950 का अर्थ

Tailwind CSS के रंग 50 सबसे हल्का और 950 सबसे गहरा है - यह 11 चरणों की संख्या से चमक को दर्शाता है, और 500 उस रंग का आधार है। संख्या को क्लास नामों के अंत में "bg-primary-500" या "text-primary-700" जैसे उपयोग किया जाता है।

• 50-300 के चरण：50-300 के चरण हल्के रंग होते हैं जो बैकग्राउंड रंग या हल्के भरने के लिए अक्सर उपयोग किए जाते हैं, और इनके ऊपर गहरे टेक्स्ट को रखने पर भी पढ़ना आसान होता है।
• 600-950 के चरण：600-950 के चरण गहरे रंग होते हैं जो बटन के होवर समय या शीर्षकों के टेक्स्ट रंग के लिए अक्सर उपयोग किए जाते हैं, और सफेद बैकग्राउंड पर भी साफ दिखाई देते हैं।

v3 और v4 के रंग परिभाषा विधि में अंतर

Tailwind CSS के v3 में रंगों को tailwind.config.js के JavaScript में परिभाषित किया जाता है, जबकि v4 में CSS फाइल के @theme में CSS वेरिएबल्स के रूप में परिभाषित किया जाता है। दोनों लेखन शैलियों में, परिभाषित रंगों को "bg-primary-500" जैसे एक ही क्लास नाम से उपयोग किया जा सकता है।

• v3 की लेखन शैली：v3 की लेखन शैली theme.extend.colors में "primary: { 500: '#3B82F6' }" जैसे रंग के नाम और चरण को नेस्टेड रूप में लिखने का है।
• v4 की लेखन शैली：v4 की लेखन शैली @theme में "--color-primary-500: #3B82F6;" जैसे रंग के नाम और चरण को हाइफन से जोड़े गए वेरिएबल नाम से लिखने का है।