🌈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;" प्रमाणे रंगाचे नाव आणि पातळी हायफनने जोडलेल्या व्हेरिएबल नावाने लिहिले जाते.