Tailwind CSS Academy · पाठ

CSS वैरिएबल-आधारित थीमिंग

डिज़ाइन टोकन को CSS कस्टम प्रॉपर्टी के रूप में संग्रहीत करें और रनटाइम पर बिना दोबारा संकलन के थीम बदलने के लिए उन्हें Tailwind के कॉन्फ़िगरेशन में संदर्भित करें।

पाठ 2, कुल 4 में से13 चरण

CSS वैरिएबल-आधारित थीमिंग, CoddyKit पर Tailwind CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Tailwind CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

थीमिंग के लिए CSS वेरिएबल क्यों?

CSS कस्टम प्रॉपर्टी (CSS वेरिएबल) Tailwind के साथ रनटाइम थीमिंग की कुंजी हैं। संकलित CSS में स्थिर रूप से शामिल मानों के विपरीत, CSS वेरिएबल को पेज दोबारा लोड किए बिना JavaScript द्वारा किसी भी समय बदला जा सकता है। इसलिए ये लाइट/डार्क मोड स्विच, उपयोगकर्ता द्वारा चुनी जाने वाली थीम या बहु-ग्राहक ब्रांडिंग लागू करने के लिए आदर्श हैं, जहाँ एक ही ऐप को अलग-अलग ग्राहकों के लिए अलग दिखना होता है।

:root में CSS वेरिएबल परिभाषित करना

CSS वेरिएबल :root चयनकर्ता पर परिभाषित किए जाते हैं, ताकि वे पूरे पेज पर उपलब्ध रहें। इनका सिंटैक्स --variable-name: value है। इन्हें var(--variable-name) से संदर्भित किया जाता है। इन परिभाषाओं को अपनी वैश्विक CSS फ़ाइल में रखें—आमतौर पर globals.css या index.css में—ताकि किसी भी घटक की शैलियाँ लागू होने से पहले ये उपलब्ध हों।

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-primary: #3b82f6;
    --color-primary-hover: #1d4ed8;
    --color-surface: #ffffff;
    --color-surface-alt: #f8fafc;
    --color-text: #111827;
    --color-text-muted: #6b7280;
    --color-border: #e5e7eb;
  }
}

Tailwind कॉन्फ़िगरेशन में CSS वेरिएबल जोड़ना

CSS वेरिएबल परिभाषित करने के बाद, tailwind.config.js में उन्हें var(--variable-name) सिंटैक्स का उपयोग करके संदर्भित करें। Tailwind ऐसी यूटिलिटी क्लास बनाएगा जो इन वेरिएबल को अपने मान के रूप में उपयोग करेंगी। रनटाइम में वेरिएबल बदलने पर, उसे संदर्भित करने वाली हर बनाई गई क्लास अपने-आप अपडेट हो जाती है—दोबारा संकलन की आवश्यकता नहीं होती।

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
        'primary-hover': 'var(--color-primary-hover)',
        surface: 'var(--color-surface)',
        'surface-alt': 'var(--color-surface-alt)',
        'text-base': 'var(--color-text)',
        'text-muted': 'var(--color-text-muted)',
        border: 'var(--color-border)'
      }
    }
  }
}

HTML में वेरिएबल-आधारित क्लास का उपयोग

वेरिएबल को Tailwind से जोड़ने के बाद आपकी यूटिलिटी क्लास पहले की तरह ही काम करती हैं—अंतर केवल इतना है कि उनका अंतर्निहित मान अब गतिशील होता है। bg-surface लिखने पर एलिमेंट पर background-color: var(--color-surface) लागू होता है। CSS में वेरिएबल का मान बदलें और bg-surface का उपयोग करने वाला प्रत्येक एलिमेंट HTML या JavaScript में किसी बदलाव के बिना अपडेट हो जाएगा।

<div class="bg-surface text-text-base border border-border rounded-xl p-6">
  <h2 class="text-xl font-semibold text-primary mb-2">Card Title</h2>
  <p class="text-text-muted text-sm">This card adapts to any theme.</p>
  <button class="bg-primary hover:bg-primary-hover text-white px-4 py-2 rounded-lg mt-4">
    Action
  </button>
</div>

CSS वेरिएबल के साथ डार्क मोड

डार्क मोड लागू करने के लिए, मूल एलिमेंट पर .dark क्लास के अंतर्गत CSS वेरिएबल के मानों को ओवरराइड करें। जब JavaScript, html पर dark क्लास को टॉगल करता है, तो सभी वेरिएबल के मान एक साथ बदल जाते हैं और प्रत्येक घटक तुरंत अपडेट हो जाता है। इस तरीके में आपके पास पहले से मौजूद वेरिएबल-आधारित क्लास के अतिरिक्त किसी Tailwind यूटिलिटी की आवश्यकता नहीं होती।

@layer base {
  :root {
    --color-primary: #3b82f6;
    --color-surface: #ffffff;
    --color-text: #111827;
  }

  .dark {
    --color-primary: #60a5fa;
    --color-surface: #1e293b;
    --color-text: #f1f5f9;
  }
}

CSS वेरिएबल के साथ अपारदर्शिता का समर्थन

CSS वेरिएबल वाले रंगों और Tailwind के अपारदर्शिता संशोधक सिंटैक्स के साथ एक सूक्ष्म बात ध्यान देने योग्य है। bg-primary/50 जैसी यूटिलिटी के लिए रंग RGB चैनल फ़ॉर्मैट में होना चाहिए, ताकि Tailwind अल्फ़ा मान जोड़ सके। अपारदर्शिता संशोधकों का समर्थन करने के लिए, अपने वेरिएबल को rgb() आवरण के बिना RGB त्रिक के रूप में परिभाषित करें और कॉन्फ़िगरेशन में rgb(var() / alpha) पैटर्न का उपयोग करें।

/* globals.css — RGB triplet format */
:root {
  --color-primary-rgb: 59 130 246;
}

/* tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: ({
          opacityValue
        }) => opacityValue
          ? 'rgb(var(--color-primary-rgb) / ' + opacityValue + ')'
          : 'rgb(var(--color-primary-rgb))'
      }
    }
  }
}

एकाधिक थीम रूपांतर

CSS वेरिएबल आपको केवल लाइट और डार्क के अलावा कई पूर्ण थीम परिभाषित करने देते हैं। data-theme एट्रिब्यूट का उपयोग करके आप अलग-अलग वेरिएबल सेट को पेज के अलग-अलग हिस्सों तक सीमित कर सकते हैं या पूरे ऐप की थीम बदल सकते हैं। यह बहु-ग्राहक SaaS ऐप के लिए विशेष रूप से उपयोगी है, जहाँ प्रत्येक ग्राहक के ब्रांड को साझा कोडबेस से अपनी रंग योजना चाहिए।

@layer base {
  [data-theme='ocean'] {
    --color-primary: #0ea5e9;
    --color-surface: #0c4a6e;
    --color-text: #e0f2fe;
  }

  [data-theme='forest'] {
    --color-primary: #16a34a;
    --color-surface: '#dcfce7';
    --color-text: #14532d;
  }
}

<!-- Switch theme with JS -->
document.documentElement.setAttribute('data-theme', 'ocean');

थीम बदलाव को एनिमेट करना

थीम बदलते समय अचानक रंग बदलना असहज लग सकता है। मूल एलिमेंट पर सभी प्रॉपर्टी के लिए CSS ट्रांज़िशन जोड़ने से वेरिएबल बदलते समय रंगों के सहज रूपांतरण का प्रभाव मिलता है। चयनात्मक रहें—बहुत अधिक प्रॉपर्टी पर ट्रांज़िशन लगाने या लंबी अवधि का उपयोग करने से UI सुस्त लग सकता है। रंग-संबंधी प्रॉपर्टी पर 150-300ms का ट्रांज़िशन आमतौर पर आदर्श होता है।

/* globals.css */
*, *::before, *::after {
  transition-property: color, background-color, border-color;
  transition-duration: 200ms;
  transition-timing-function: ease;
}

/* Exclude transitions from elements that should be instant */
.no-theme-transition,
.no-theme-transition * {
  transition: none !important;
}

थीम की पसंद को सुरक्षित रखना

अगर पेज दोबारा लोड होने पर थीम स्विच रीसेट हो जाए, तो उसका कोई लाभ नहीं है। उपयोगकर्ता की पसंद को सुरक्षित रखने और अगली विज़िट पर पुनर्स्थापित करने के लिए localStorage का उपयोग करें। गलत थीम की झलक से बचने के लिए पुनर्स्थापना स्क्रिप्ट पेज के रेंडर होने से पहले चलनी चाहिए। HTML head के शीर्ष पर एक इनलाइन स्क्रिप्ट रखें—ऐसे मॉड्यूल में नहीं जो पेंट होने के बाद लोड हो।

<!-- In <head> before any CSS -->
<script>
  (function() {
    var theme = localStorage.getItem('theme') ||
      (window.matchMedia('(prefers-color-scheme: dark)').matches
        ? 'dark' : 'light');
    document.documentElement.setAttribute('data-theme', theme);
    if (theme === 'dark') {
      document.documentElement.classList.add('dark');
    }
  })();
</script>

सिमेंटिक वेरिएबल नामकरण पैटर्न

CSS वेरिएबल के लिए एक सुसंगत नामकरण पैटर्न अपनाएँ, ताकि वे अनुमान योग्य और स्वयं-वर्णनात्मक रहें। --category-role-state का तीन-भाग वाला पैटर्न अच्छी तरह काम करता है। उदाहरण के लिए: --color-action-default, --color-action-hover, --color-surface-raised, --color-feedback-error। --color1 जैसे अस्पष्ट या --signup-button-blue जैसे अत्यधिक विशिष्ट नामों से बचें।

:root {
  /* Action colors */
  --color-action-default: #3b82f6;
  --color-action-hover: #1d4ed8;
  --color-action-disabled: #93c5fd;

  /* Surface colors */
  --color-surface-base: #ffffff;
  --color-surface-raised: #f8fafc;
  --color-surface-overlay: #f1f5f9;

  /* Feedback colors */
  --color-feedback-success: #16a34a;
  --color-feedback-error: #dc2626;
  --color-feedback-warning: #d97706;
}

CSS वेरिएबल थीम की डीबगिंग

जब थीम वाला रंग सही ढंग से दिखाई न दे, तो ब्राउज़र का DevTools आपका सबसे उपयोगी सहायक है। कम्प्यूटेड स्टाइल पैनल किसी भी एलिमेंट पर किसी भी CSS वेरिएबल का निर्धारित मान दिखाता है। सभी वेरिएबल के मान देखने के लिए आप सीधे :root का भी निरीक्षण कर सकते हैं। यदि रंग के बजाय आपको कच्ची var(--name) स्ट्रिंग दिखाई दे रही है, तो वर्तमान स्कोप में वेरिएबल परिभाषित नहीं है—टाइपो या अनुपस्थित :root ब्लॉक की जाँच करें।

/* Quick debug: visualize all theme colors */
.theme-debug {
  background-color: var(--color-surface-base);
  color: var(--color-text-primary);
  border: 2px solid var(--color-border);
}

/* In DevTools console: */
/* getComputedStyle(document.documentElement)
   .getPropertyValue('--color-primary') */

त्वरित जाँच

इस पाठ में Tailwind CSS Mastery की अवधारणाओं की अपनी समझ जाँचें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पाठ का पुनरावलोकन

इस पाठ में आपने सीखा: :root पर परिभाषित CSS कस्टम प्रॉपर्टी गतिशील डिज़ाइन टोकन के रूप में काम करती हैं, Tailwind का कॉन्फ़िगरेशन उन्हें var(--name) के साथ संदर्भित कर सकता है, जिससे बनाई गई क्लास रनटाइम में बदलाव की सुविधा अपना लेती हैं, और अलग-अलग क्लास या डेटा-एट्रिब्यूट चयनकर्ताओं के अंतर्गत वेरिएबल के मान बदलकर एकाधिक थीम लागू की जाती हैं। आगे हम उत्पाद टीमों के लिए बहु-ब्रांड थीमिंग रणनीतियों का अध्ययन करेंगे।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 30
पाठ: 120

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “CSS वैरिएबल-आधारित थीमिंग” पाठ निःशुल्क है?

हाँ—“CSS वैरिएबल-आधारित थीमिंग” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Tailwind CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“CSS वैरिएबल-आधारित थीमिंग” में मैं क्या सीखूँगा?

डिज़ाइन टोकन को CSS कस्टम प्रॉपर्टी के रूप में संग्रहीत करें और रनटाइम पर बिना दोबारा संकलन के थीम बदलने के लिए उन्हें Tailwind के कॉन्फ़िगरेशन में संदर्भित करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Tailwind CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Tailwind CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Tailwind CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“CSS वैरिएबल-आधारित थीमिंग” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Tailwind CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Tailwind CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Tailwind CSS Academy पर वापस जाएँ