कस्टम रंग जोड़ना
कॉन्फ़िगरेशन में ब्रांड रंगों को CSS चर या hex मानों के रूप में परिभाषित करें, पैलेट को कस्टम शेड से बढ़ाएँ और उन्हें किसी भी रंग यूटिलिटी के साथ उपयोग करें।
कस्टम रंग जोड़ना, CoddyKit पर Tailwind CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Tailwind CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
कस्टम रंग क्यों महत्वपूर्ण हैं
हर वास्तविक प्रोजेक्ट की एक ब्रांड पहचान होती है, जिसमें ऐसे विशिष्ट रंग शामिल होते हैं जो Tailwind के डिफ़ॉल्ट पैलेट में मौजूद नहीं होते। Tailwind की कॉन्फ़िगरेशन में अपने ब्रांड रंग जोड़ने से उन रंगों के लिए पूरी उपयोगिता-क्लास API उपलब्ध हो जाती है—आप उनका उपयोग bg-*, text-*, border-*, ring-*, shadow-* और हर दूसरी रंग उपयोगिता के साथ कर सकते हैं। आपके कस्टम रंग अपारदर्शिता संशोधकों और डार्क मोड वैरिएंट के साथ भी अपने-आप काम करते हैं।
एक सरल कस्टम रंग जोड़ना
कस्टम रंग जोड़ने का सबसे सरल तरीका theme.extend.colors में किसी कुंजी नाम के साथ एकल हेक्स मान देना है। Tailwind उस सटीक रंग के लिए एक उपयोगिता क्लास बनाता है। कुंजी क्लास नाम का हिस्सा बन जाती है: brand कुंजी से bg-brand, text-brand, border-brand आदि बनते हैं। एकल-मान वाले रंग brand-500 जैसे शेड प्रत्यय का समर्थन नहीं करते।
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: '#6366f1',
accent: '#f59e0b',
danger: '#ef4444',
},
},
},
};
<!-- Usage -->
<div class="bg-brand text-white">Brand background</div>
<span class="text-accent font-semibold">Accent text</span>पूरा शेड स्केल जोड़ना
जिन रंगों में विविधता आवश्यक होती है—जैसे होवर स्थिति, पृष्ठभूमि और टेक्स्ट के लिए हल्के और गहरे रूप—उनके लिए नेस्टेड ऑब्जेक्ट के रूप में पूरा शेड स्केल परिभाषित करें। Tailwind के मानक शेड नंबर (50, 100, 200, ... 900, 950) का उपयोग करें। इससे सूक्ष्म पृष्ठभूमि के लिए bg-brand-100, मुख्य रंग के लिए bg-brand-500 और गहरे उभारों के लिए bg-brand-900 जैसी उपयोगिताएँ उपलब्ध हो जाती हैं।
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#eef2ff',
100: '#e0e7ff',
200: '#c7d2fe',
300: '#a5b4fc',
400: '#818cf8',
500: '#6366f1',
600: '#4f46e5',
700: '#4338ca',
800: '#3730a3',
900: '#312e81',
950: '#1e1b4b',
},
},
},
},
};रंग शेड अपने-आप बनाना
हर ब्रांड रंग के लिए दस हेक्स मान हाथ से लिखना उबाऊ है। uicolors.app, palettte.app या Tailwind टीम के ऑनलाइन रंग-शेड जनरेटर जैसे उपकरण एक आधार रंग लेकर perceptually समान क्रमिक बदलावों वाला पूरा 50-950 स्केल बनाते हैं। Figma जैसे कई डिज़ाइन उपकरणों में ऐसे प्लगइन भी होते हैं, जो रंग पैलेट को सीधे Tailwind कॉन्फ़िगरेशन प्रारूप में एक्सपोर्ट करते हैं।
// Generated from uicolors.app or similar tool
// Base color: #6366f1 (indigo brand)
colors: {
brand: {
'50': '#eef2ff',
'100': '#e0e7ff',
'200': '#c7d2fe',
'300': '#a5b4fc',
'400': '#818cf8',
'500': '#6366f1',
'600': '#4f46e5',
'700': '#4338ca',
'800': '#3730a3',
'900': '#312e81',
'950': '#1e1b4b'
}
}DEFAULT कुंजी
रंग स्केल ऑब्जेक्ट के अंदर आप DEFAULT कुंजी जोड़कर बिना शेड नंबर वाली मूल उपयोगिता क्लास को किसी विशिष्ट शेड पर सेट कर सकते हैं। उदाहरण के लिए, DEFAULT: '#6366f1' सेट करने का अर्थ है कि bg-brand 500 शेड के रूप में रेंडर होगा। यह तब उपयोगी है जब आपके डिज़ाइन में किसी विशिष्ट प्राथमिक शेड का सबसे अधिक उपयोग होता हो और आप पूरा स्केल बनाए रखते हुए उसके लिए छोटा क्लास नाम चाहते हों।
// tailwind.config.js
colors: {
brand: {
DEFAULT: '#6366f1', // bg-brand = #6366f1 (same as brand-500)
light: '#818cf8', // bg-brand-light
dark: '#4338ca', // bg-brand-dark
50: '#eef2ff', // bg-brand-50
500: '#6366f1', // bg-brand-500 (same as DEFAULT)
900: '#312e81', // bg-brand-900
},
}रंगों के लिए CSS वेरिएबल का उपयोग करना
जो रंग रनटाइम पर बदलते हैं—जैसे उपयोगकर्ता की पसंद से बदले जाने वाले थीम रंग—उन्हें CSS कस्टम प्रॉपर्टी के रूप में परिभाषित करें और अपनी Tailwind कॉन्फ़िगरेशन में उन वेरिएबल का संदर्भ दें। अपारदर्शिता संशोधक समर्थन सक्षम करने के लिए <alpha-value> प्लेसहोल्डर का उपयोग करें (bg-brand/50)। Tailwind पर आधारित बहु-थीम डिज़ाइन सिस्टम की नींव यही तरीका है।
/* In your CSS */
:root {
--color-brand: 99 102 241; /* RGB values for opacity support */
}
/* tailwind.config.js */
module.exports = {
theme: {
extend: {
colors: {
brand: 'rgb(var(--color-brand) / <alpha-value>)',
},
},
},
};
<!-- Now bg-brand/50 works correctly -->
<div class="bg-brand/50">50% opacity brand background</div>Tailwind के डिफ़ॉल्ट रंगों का संदर्भ देना
कभी-कभी आप मौजूदा Tailwind रंगों का नाम बदलना या उनका उपनाम बनाना चाहते हैं—जैसे indigo के उपनाम के रूप में primary का उपयोग करना, ताकि आपके घटक ब्रांड से स्वतंत्र रहें। Tailwind के रंग ऑब्जेक्ट को इम्पोर्ट करें और किसी भी अंतर्निहित रंग का नाम से संदर्भ देने के लिए उसे अपनी कॉन्फ़िगरेशन में उपयोग करें। इससे आपका पैलेट DRY रहता है: उपनाम को एक बार बदलने पर primary का उपयोग करने वाली सभी घटक क्लास अपडेट हो जाती हैं।
const colors = require('tailwindcss/colors');
module.exports = {
theme: {
extend: {
colors: {
primary: colors.indigo, // bg-primary-500 = bg-indigo-500
secondary: colors.violet, // bg-secondary-500 = bg-violet-500
neutral: colors.slate, // text-neutral-700 = text-slate-700
},
},
},
};अर्थपूर्ण रंग नामकरण
रंगों का नाम उनके रंग-स्वर (indigo, violet) के आधार पर रखने के बजाय अपने डिज़ाइन में उनकी अर्थपूर्ण भूमिका के आधार पर रखें (primary, secondary, success, warning, error)। अर्थपूर्ण नामकरण आपके घटकों को रीब्रांडिंग के प्रति अधिक टिकाऊ बनाता है: यदि ब्रांड का रंग indigo से teal हो जाता है, तो आप एक कॉन्फ़िगरेशन प्रविष्टि अपडेट करते हैं और सभी घटक अपने-आप बदलाव दर्शाते हैं।
// Semantic color system
module.exports = {
theme: {
extend: {
colors: {
primary: { 50: '#eef2ff', 500: '#6366f1', 900: '#312e81' },
secondary: { 50: '#f5f3ff', 500: '#8b5cf6', 900: '#2e1065' },
success: { 50: '#f0fdf4', 500: '#22c55e', 900: '#052e16' },
warning: { 50: '#fffbeb', 500: '#f59e0b', 900: '#451a03' },
error: { 50: '#fef2f2', 500: '#ef4444', 900: '#450a0a' },
},
},
},
};डार्क मोड में कस्टम रंगों का उपयोग करना
कस्टम रंग डार्क मोड वैरिएंट के साथ उसी तरह काम करते हैं जैसे अंतर्निहित रंग। लाइट मोड के लिए हल्के शेड वाले कस्टम रंगों और डार्क मोड के लिए गहरे शेड वाले वैरिएंट का संयोजन करें। यदि आप अपने रंगों के लिए CSS वेरिएबल का उपयोग कर रहे हैं, तो .dark चयनकर्ता में वेरिएबल का मान बदल सकते हैं और उस वेरिएबल का संदर्भ देने वाली सभी उपयोगिताएँ अपने-आप अपडेट हो जाएँगी—किसी अतिरिक्त dark: क्लास की आवश्यकता नहीं होगी।
<!-- Custom color with dark mode -->
<div class="bg-brand-50 dark:bg-brand-950 text-brand-900 dark:text-brand-100 p-6 rounded-xl">
<h2 class="text-brand-700 dark:text-brand-300 font-bold">Brand Card</h2>
<p class="text-brand-600 dark:text-brand-400">Content that adapts to dark mode</p>
</div>कस्टम रंगों के साथ अपारदर्शिता संशोधक
हेक्स मानों के रूप में परिभाषित कस्टम रंग Tailwind के opacity modifier syntax (bg-brand-500/75) का भी समर्थन करते हैं, जब Tailwind हेक्स को RGB निरूपण में बदल सकता है। <alpha-value> प्लेसहोल्डर वाले CSS variables के रूप में परिभाषित रंग और भी बेहतर काम करते हैं। इससे अलग-अलग उपयोग स्थानों पर अलग utility classes की आवश्यकता के बिना opacity पर सटीक नियंत्रण मिलता है।
<!-- Opacity modifier with custom hex colors -->
<div class="bg-brand-500/20 border border-brand-500/30 text-brand-700">
Subtle brand-tinted background
</div>
<div class="shadow-brand-500/50 shadow-xl">
Brand-colored shadow
</div>
<button class="bg-brand-600 hover:bg-brand-600/90 text-white px-4 py-2 rounded-lg">
Slightly transparent on hover
</button>HTML में कस्टम रंगों का परीक्षण
अपने config में कस्टम रंग जोड़ने के बाद, Tailwind का build चलाकर और अपनी HTML में classes का उपयोग करके जाँच करें कि वे काम कर रहे हैं। जनरेट की गई CSS फ़ाइल भी जाँचें (आपकी classes उसमें दिखाई देनी चाहिए) और ब्राउज़र में दृश्य परिणाम भी देखें। यह सुनिश्चित करने के लिए dark mode variants, opacity modifiers और hover states का भी परीक्षण करें कि व्युत्पन्न utilities का पूरा समूह आपके कस्टम रंगों के साथ सही ढंग से काम कर रहा है।
<!-- Test all derivative utilities work -->
<div class="p-4 space-y-2">
<div class="bg-brand-100 text-brand-900 p-2 rounded">bg-brand-100</div>
<div class="bg-brand-500 text-white p-2 rounded">bg-brand-500</div>
<div class="bg-brand-900 text-brand-100 p-2 rounded">bg-brand-900</div>
<div class="bg-brand-500/50 text-brand-900 p-2 rounded">bg-brand-500/50 (opacity)</div>
<div class="border-2 border-brand-500 text-brand-700 p-2 rounded">border-brand-500</div>
</div>त्वरित जाँच
Tailwind CSS में कस्टम रंग जोड़ने की अपनी समझ का परीक्षण करें।
पाठ का पुनरावलोकन
इस पाठ में आपने सीखा: theme.extend.colors में कस्टम रंगों को एकल हेक्स मानों या पूर्ण शेड स्केल के रूप में जोड़ना, टिकाऊ डिज़ाइन के लिए रंग के नामों के बजाय semantic names जैसे primary और error का उपयोग करना, और opacity modifier के समर्थन के लिए CSS variables को <alpha-value> के साथ परिभाषित करना। अगले पाठ में हम Google Fonts और स्थानीय स्रोतों से कस्टम font families जोड़ेंगे।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 30
- पाठ
- 120
अक्सर पूछे जाने वाले प्रश्न
क्या “कस्टम रंग जोड़ना” पाठ निःशुल्क है?
हाँ—“कस्टम रंग जोड़ना” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Tailwind CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“कस्टम रंग जोड़ना” में मैं क्या सीखूँगा?
कॉन्फ़िगरेशन में ब्रांड रंगों को CSS चर या hex मानों के रूप में परिभाषित करें, पैलेट को कस्टम शेड से बढ़ाएँ और उन्हें किसी भी रंग यूटिलिटी के साथ उपयोग करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Tailwind CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Tailwind CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Tailwind CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।
“कस्टम रंग जोड़ना” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Tailwind CSS Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Tailwind CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।