Tailwind टोकन, CSS वेरिएबल और CSS-in-JS

स्टाइल डिक्शनरी का CSS प्लेटफ़ॉर्म आउटपुट CSS कस्टम प्रॉपर्टीज़ की एक फ़ाइल बनाता है: --color-primary-500: #3b82f6; --spacing-4: 16px; और इसी तरह आगे भी। ये चर :root पर परिभाषित होते हैं, जिससे वे पूरे ऐप्लिकेशन में उपलब्ध रहते हैं। यही ऐप्लिकेशन में सभी टोकनों के उपयोग का आधार है।

जनरेट की गई CSS टोकन फ़ाइल को अपनी वैश्विक स्टाइलशीट या मूल लेआउट घटक में आयात करें: @import './tokens/tokens.css'। Next.js में इसे app/layout.tsx या styles/globals.css में आयात करें। आयात करने के बाद ऐप्लिकेशन का प्रत्येक CSS नियम और घटक इन कस्टम प्रॉपर्टीज़ को संदर्भित कर सकता है।

घटक स्टाइलशीट या CSS मॉड्यूल में CSS चर का संदर्भ दें: background-color: var(--color-primary-500); और padding: var(--spacing-4);। यदि JSON स्रोत में टोकन का मान बदलता है, तो स्टाइल डिक्शनरी को दोबारा बनाने पर CSS फ़ाइल अपडेट हो जाती है और उस चर का उपयोग करने वाले सभी घटक नए मान को अपने-आप दिखाने लगते हैं।

CSS कस्टम प्रॉपर्टीज़ रनटाइम पर थीम बदलने की सुविधा देती हैं। डार्क मोड के लिए किसी थीम चयनकर्ता के अंतर्गत टोकन मानों को अधिलिखित करें: [data-theme="dark"] { --color-background: #1a1a2a; --color-text: #f0f0f0; }। document.documentElement.setAttribute('data-theme', 'dark') सेट करने पर बिना दोबारा लोड या बिल्ड किए सभी टोकन मान तुरंत बदल जाते हैं।

टोकन मानों का उपयोग करने के लिए tailwind.config.js में टेलविंड की थीम का विस्तार करें: theme: { extend: { colors: { primary: { 500: tokenOutput.color.primary[500] } } } }। स्टाइल डिक्शनरी से प्राप्त JS आउटपुट को टेलविंड कॉन्फ़िगरेशन में आयात करें, ताकि टेलविंड क्लासें (bg-primary-500) हमेशा प्रामाणिक टोकन मानों का उपयोग करें।

टेलविंड में रनटाइम पर बदली जा सकने वाली थीम के लिए रंग को CSS चर का संदर्भ देने के लिए कॉन्फ़िगर करें: 'primary': 'rgb(var(--color-primary-rgb) / <alpha-value>)'। इसके लिए आवश्यक है कि आपका CSS चर RGB घटकों को rgb() आवरण के बिना संग्रहीत करे (--color-primary-rgb: 59 130 246)। इसके बाद टेलविंड अपारदर्शिता वाली उपयोगिता-क्लासों को अपने-आप संभालता है।

CSS-in-JS लाइब्रेरीज़ JavaScript थीम ऑब्जेक्ट का उपयोग करती हैं। स्टाइल डिक्शनरी के JS आउटपुट को थीम प्रदाता के मान के रूप में दें: <ThemeProvider theme={tokens}>। घटक const theme = useTheme() और theme.color.primary[500] के माध्यम से टोकनों तक पहुँचते हैं। स्टाइल डिक्शनरी टाइपयुक्त टोकन ऑब्जेक्ट बनाता है और थीम प्रदाता उसे वितरित करता है।

stylelint-no-hardcoded-colors प्लगइन और कस्टम ईएसलिंट नियम यह लागू कर सकते हैं कि स्टाइलशीट या घटक फ़ाइलों में कोई स्थिर हेक्स मान न हो। यदि कोई डेवलपर color: var(--color-primary-500) के बजाय color: #3b82f6 लिखता है, तो लिंटर इसकी सूचना देता है। इससे टोकन प्रणाली ही रंगों का एकमात्र स्रोत बनी रहती है।

जब रनटाइम पर टोकन नामों से टेलविंड क्लास नाम गतिशील रूप से बनाए जाते हैं, तो टेलविंड का अप्रयुक्त क्लास हटाने वाला चरण उन क्लासों को हटा सकता है, क्योंकि वे स्रोत में स्थिर स्ट्रिंग के रूप में दिखाई नहीं देते। गतिशील क्लास प्रतिरूपों को tailwind.config.js में safelist में जोड़ें: safelist: [{ pattern: /bg-primary-/ }]।

फ़िग्मा टोकन प्लगइन फ़िग्मा के टोकन मानों को सीधे स्टाइल डिक्शनरी के JSON प्रारूप में निर्यात करता है। कार्यप्रवाह इस प्रकार है: डिज़ाइनर फ़िग्मा वेरिएबल्स में रंग अपडेट करते हैं, प्लगइन के माध्यम से निर्यात करते हैं, अपडेट की गई JSON फ़ाइल को कमिट करते हैं, प्रीबिल्ड स्क्रिप्ट स्टाइल डिक्शनरी चलाती है और अपडेट किए गए CSS तथा JS आउटपुट का उपयोग रिएक्ट ऐप में किया जाता है। डिज़ाइन और कोड समकालिक रहते हैं।

CSS कस्टम प्रॉपर्टीज़ उस तत्त्व और उसके वंशजों तक सीमित होती हैं, जिन पर वे परिभाषित की जाती हैं। इससे घटक-स्तरीय थीम ओवरराइड संभव होते हैं: कोई कार्ड घटक अपने मूल तत्त्व पर --color-background: var(--color-surface-elevated) सेट कर सकता है और उसके सभी वंशज बिना प्रॉप्स को क्रमशः आगे भेजे उभरे हुए सतह रंग का उपयोग कर सकते हैं।

स्टाइल डिक्शनरी वैश्विक आयात के लिए CSS कस्टम प्रॉपर्टीज़ और टेलविंड तथा CSS-in-JS एकीकरण के लिए JS ऑब्जेक्ट बनाता है। CSS चर [data-theme] ओवरराइड के माध्यम से रनटाइम पर थीम बदलने की सुविधा देते हैं। टेलविंड अपने कॉन्फ़िगरेशन का विस्तार JS आउटपुट से प्राप्त टोकन मानों के साथ करता है; अपारदर्शिता नियंत्रित करने वाली थीम के लिए टेलविंड को RGB CSS चरों का संदर्भ देने के लिए कॉन्फ़िगर करें। लिंट नियम केवल टोकन-आधारित रंग उपयोग लागू करते हैं, जिससे कोडबेस में स्थिर रूप से लिखे मान नहीं रह जाते।