🌈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;" जस्तै रङ्ग नाम र चरण हाइफनले जोडेको चर नामले लेखने ढाँचा हो।