JIT इंजन कैसे काम करता है
समझें कि Tailwind v3 का डिफ़ॉल्ट JIT मोड आपकी फ़ाइलों को माँग पर कैसे स्कैन करता है और आपके मार्कअप में वास्तव में उपयोग किए गए यूटिलिटी वर्ग ही बनाता है।
JIT इंजन कैसे काम करता है, CoddyKit पर Tailwind CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Tailwind CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
JIT इंजन क्या है
Tailwind का Just-In-Time (JIT) इंजन, जिसे Tailwind v2.1 में प्रस्तुत किया गया और v3 में डिफ़ॉल्ट बनाया गया, Tailwind द्वारा CSS बनाने के तरीके को मूल रूप से बदल देता है। बिल्ड के समय हर संभावित उपयोगिता क्लास संयोजन पहले से बनाने (जिसके परिणामस्वरूप कई मेगाबाइट की CSS बनती है) के बजाय, JIT आपके प्रोजेक्ट की फ़ाइलों को स्कैन करता है और केवल उन्हीं क्लास को बनाता है जिनका आप वास्तव में उपयोग करते हैं।
इसका परिणाम ऐसी CSS फ़ाइल होती है जो विकास के दौरान आमतौर पर केवल कुछ किलोबाइट की होती है और उत्पादन में इससे भी छोटी, तथा इसमें कोई अनावश्यक कोड नहीं होता।
JIT से पहले और JIT का तरीका
JIT से पहले Tailwind बिल्ड के अंत में पर्ज चरण का उपयोग करता था: यह सभी संभावित CSS (~10MB) बनाता था, फिर आपके टेम्पलेट में न मिलने वाली प्रत्येक क्लास को हटा देता था। यह धीमा था, इसमें सावधानीपूर्वक पर्ज कॉन्फ़िगरेशन की आवश्यकता होती थी और क्लास नाम गतिशील रूप से बनाए जाने पर यह काम करना बंद कर देता था।
JIT इस प्रक्रिया को उलट देता है: यह पहले फ़ाइलों को स्कैन करता है और केवल उन क्लास के लिए CSS बनाता है जिन्हें वह पाता है। विकास, स्टेजिंग और उत्पादन — हर वातावरण में आउटपुट तुरंत छोटा रहता है और बिल्ड काफ़ी तेज़ होता है।
// Old approach: generate ALL classes, then purge
// - ~10MB initial CSS
// - Slow build
// - Purge config errors silently broke production
// JIT approach: scan first, generate only used classes
// - ~3-5KB CSS in development
// - Sub-second builds
// - No separate purge step neededJIT आपकी फ़ाइलों को कैसे स्कैन करता है
JIT यह जानने के लिए tailwind.config.js में मौजूद content array को पढ़ता है कि किन फ़ाइलों को स्कैन करना है। क्लास जैसी स्ट्रिंग खोजने के लिए यह तेज़, रेगेक्स-आधारित स्कैन का उपयोग करता है (पूरे HTML/JS पार्सर का नहीं)। ज्ञात Tailwind क्लास पैटर्न से मेल खाने वाली प्रत्येक स्ट्रिंग के लिए उसकी CSS बनाई जाती है।
इसीलिए content array को सही ढंग से कॉन्फ़िगर करना अत्यंत महत्वपूर्ण है — यदि JIT को कोई फ़ाइल नहीं मिलती, तो उसमें उपयोग की गई क्लास नहीं बनाई जाएँगी।
// tailwind.config.js
module.exports = {
content: [
'./src/**/*.{html,js,jsx,ts,tsx}',
'./pages/**/*.{js,jsx,ts,tsx}',
'./components/**/*.{js,jsx,ts,tsx}',
],
theme: {
extend: {},
},
plugins: [],
}माँग पर क्लास बनाना
जब JIT आपके मार्कअप में किसी क्लास का पता लगाता है, तो वह उसके लिए सटीक CSS नियम तुरंत बना देता है। यदि आप bg-blue-500 का उपयोग करते हैं, तो केवल उसी एक रंग का नियम बनाया जाता है — पूरी नीली रंग-श्रेणी का नहीं। बाद में यदि आप bg-blue-700 जोड़ते हैं, तो JIT अगले पुनर्निर्माण पर वह नया नियम बना देता है।
विकास के दौरान फ़ाइल पर नज़र रखने वाले तंत्र की वजह से यह कुछ मिलीसेकंड में हो जाता है। JIT के तरीके का अर्थ है कि आपको शून्य-अतिरिक्त-भार वाली CSS मिलती है — आपकी स्टाइलशीट का प्रत्येक बाइट सक्रिय रूप से उपयोग किया जाता है।
/* Only classes actually used in your templates are generated */
/* If you use: bg-blue-500, text-white, px-4, py-2, rounded-lg */
/* JIT generates: */
.bg-blue-500 { background-color: #3b82f6; }
.text-white { color: #fff; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.rounded-lg { border-radius: 0.5rem; }
/* NOT generated: bg-blue-100, bg-blue-200, ... bg-blue-900, text-gray-*, etc. */JIT से समर्थित मनमाने मान
JIT मनमाने मानों का सिंटैक्स उपलब्ध कराता है — यानी वर्गाकार कोष्ठक वाले रूप का उपयोग करके किसी भी CSS मान को सीधे क्लास नाम में लिखने की क्षमता। JIT से पहले कस्टम कॉन्फ़िगरेशन के बिना मनमाने मानों का उपयोग संभव नहीं था। JIT कोष्ठक वाला सिंटैक्स मिलते ही माँग पर नियम बना देता है।
उदाहरण के लिए, w-[347px], text-[#1a2b3c] या top-[calc(100vh-64px)] सीधे काम करते हैं। JIT कोष्ठकों का पता लगाता है, मान को पार्स करता है और ठीक उतनी ही CSS बनाता है जितनी आवश्यक है।
<!-- JIT generates CSS for arbitrary values on demand -->
<div class="w-[347px]">Exactly 347px wide</div>
<p class="text-[#1a2b3c] text-[22px]">Custom color and size</p>
<div class="top-[calc(100vh-64px)]">Viewport height minus navbar</div>
<div class="grid-cols-[1fr_2fr_1fr]">Custom grid columns</div>JIT और गतिशील क्लास नाम
JIT के स्कैन-आधारित तरीके की एक महत्वपूर्ण सीमा यह है कि यह गतिशील रूप से बनाए गए क्लास नामों का पता नहीं लगा सकता। यदि आप JavaScript में स्ट्रिंग जोड़कर कोई क्लास नाम बनाते हैं, तो स्कैन के समय JIT उसे नहीं देख पाएगा।
समाधान यह है कि क्लास को आंशिक रूप से बनाने से बचें। हमेशा पूर्ण क्लास स्ट्रिंग का उपयोग करें, या गतिशील रूप से निर्धारित क्लास के लिए कॉन्फ़िगरेशन में safelist का उपयोग करें।
// BAD: JIT cannot statically detect the assembled class
const color = 'blue';
const shade = '500';
const className = 'bg-' + color + '-' + shade; // 'bg-blue-500' — NOT detected!
// GOOD: Use complete class strings
const classMap = {
blue: 'bg-blue-500',
red: 'bg-red-500',
green: 'bg-green-500',
};
const className = classMap[color]; // full string — JIT detects all values in the objectविकास में JIT का वॉच मोड
npx tailwindcss -i input.css -o output.css --watch चलाने पर JIT वॉच मोड में शुरू होता है। यह content ग्लॉब से मेल खाने वाली सभी फ़ाइलों पर नज़र रखता है और किसी फ़ाइल में बदलाव होने पर कुछ मिलीसेकंड के अंदर CSS फ़ाइल का पुनर्निर्माण करता है।
Vite या Next.js प्रोजेक्ट में Tailwind का JIT बिल्ड टूल के HMR (हॉट मॉड्यूल रिप्लेसमेंट) पाइपलाइन में एकीकृत होता है, इसलिए पूरे पृष्ठ को फिर से लोड किए बिना CSS अपडेट ब्राउज़र में तुरंत दिखाई देते हैं।
# Start Tailwind JIT in watch mode (standalone)
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
# Vite integrates Tailwind automatically via postcss.config.js:
# postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}JIT द्वारा वैरिएंट बनाना
JIT से पहले आपको प्रत्येक उपयोगिता समूह के लिए कॉन्फ़िगरेशन फ़ाइल में वैरिएंट (जैसे hover, focus, dark) स्पष्ट रूप से सक्षम करने पड़ते थे। प्रत्येक उपयोगिता के लिए हर वैरिएंट को सक्षम करने पर बहुत बड़ी CSS फ़ाइल पहले से बन जाती थी।
JIT इस समस्या को पूरी तरह हल करता है — कॉन्फ़िगरेशन के बिना हर वैरिएंट हर उपयोगिता के साथ काम करता है। hover:bg-blue-500, dark:text-white, lg:hover:bg-blue-700 — ये सभी शून्य कॉन्फ़िगरेशन के साथ माँग पर बनाए जाते हैं।
<!-- All of these work without any config in Tailwind v3 JIT -->
<button class="bg-blue-600 hover:bg-blue-700 active:bg-blue-800
focus-visible:ring-2 focus-visible:ring-blue-500
disabled:opacity-50 disabled:cursor-not-allowed
dark:bg-blue-500 dark:hover:bg-blue-400
sm:px-4 lg:px-6">
Click me
</button>कंटेंट ग्लोब पैटर्न
content ऐरे यह बताने के लिए ग्लोब पैटर्न का उपयोग करता है कि JIT को किन फ़ाइलों को स्कैन करना चाहिए। './src/**/*.{html,js}' जैसा ग्लोब src डायरेक्टरी ट्री के अंदर कहीं भी मौजूद सभी HTML और JS फ़ाइलों से मेल खाता है।
आम गलतियों में फ़ाइल एक्सटेंशन भूल जाना, गलत बेस पाथ का उपयोग करना, या उन node_modules पैकेजों को शामिल न करना आता है जिनमें Tailwind क्लास मौजूद हैं, जैसे UI कंपोनेंट लाइब्रेरी। विशिष्ट फ़ाइलों के लिए ग्लोब के बजाय स्ट्रिंग ऐरे भी पास किए जा सकते हैं।
// tailwind.config.js
module.exports = {
content: [
// All templates in src/
'./src/**/*.{html,js,jsx,ts,tsx,vue,svelte}',
// Specific config file
'./index.html',
// A UI library that uses Tailwind classes
'./node_modules/@my-ui-lib/components/**/*.{js,ts}',
],
}प्रोडक्शन बनाम डेवलपमेंट में JIT
JIT डेवलपमेंट और प्रोडक्शन, दोनों में CSS का एक ही सेट जनरेट करता है—सिर्फ़ वही क्लास जो आपकी कंटेंट फ़ाइलों में मिलती हैं। प्रोडक्शन में अंतर यह है कि Tailwind मिनिफ़िकेशन भी लागू करता है, जो आपके बिल्ड टूल के CSS मिनिफ़ायर के ज़रिए होता है, और पुराने ब्राउज़र सपोर्ट के लिए PostCSS ऑटोप्रीफ़िक्सर भी लागू कर सकता है।
Tailwind v3 में कोई अलग पर्ज चरण नहीं है। अपने बिल्ड कमांड में NODE_ENV=production सेट करने से मिनिफ़िकेशन सक्षम होता है, लेकिन जनरेट होने वाली क्लास नहीं बदलतीं—JIT की वजह से डेवलपमेंट में ही वे पहले से न्यूनतम थीं।
# Development build (readable output)
NODE_ENV=development npx tailwindcss -i input.css -o output.css
# Production build (minified)
NODE_ENV=production npx tailwindcss -i input.css -o output.css --minify
# Result sizes:
# Development: ~8KB (readable, not minified)
# Production: ~3KB (same classes, minified + whitespace removed)लेयर क्रम और JIT
JIT Tailwind के CSS लेयर क्रम का पालन करता है: सबसे पहले बेस स्टाइल, फिर कंपोनेंट स्टाइल और अंत में यूटिलिटी स्टाइल आती हैं। यह क्रम महत्वपूर्ण है, क्योंकि परंपरा के अनुसार यूटिलिटी की विशिष्टता सबसे अधिक होती है—कंपोनेंट स्टाइल से टकराव होने पर उन्हें हमेशा प्रभावी होना चाहिए।
@layer utilities के साथ लिखा गया कस्टम CSS भी बिल्ट-इन यूटिलिटी के साथ JIT द्वारा जनरेट किया जाता है। किसी भी @layer के बाहर लिखा गया कस्टम CSS विशिष्टता के क्रम में बेस और कंपोनेंट के बीच आता है, जिससे अनपेक्षित ओवरराइड व्यवहार हो सकता है।
/* input.css */
@tailwind base; /* Reset styles, lowest specificity */
@tailwind components; /* @layer components { .btn { ... } } */
@tailwind utilities; /* All utilities, highest specificity */
/* Custom utility in JIT layer order --*/
@layer utilities {
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
}त्वरित जाँच
इस पाठ में Tailwind CSS Mastery की अवधारणाओं की अपनी समझ जाँचें।
पाठ का पुनरावलोकन
इस पाठ में आपने सीखा: JIT आपकी कंटेंट फ़ाइलों को टेक्स्ट के रूप में स्कैन करके क्लास स्ट्रिंग ढूँढ़ता है और केवल उन्हीं क्लास के लिए CSS जनरेट करता है, जिससे पहले दिन से ही अप्रयुक्त स्टाइल हट जाती हैं; w-[347px] जैसे मनमाने मान JIT के ऑन-डिमांड जनरेशन से सक्षम होते हैं; और डायनेमिक क्लास बनाना JIT की पहचान को बाधित करता है, क्योंकि वह JavaScript चला नहीं सकता—सुरक्षित-सूचीबद्ध ऑब्जेक्ट में हमेशा पूरी क्लास स्ट्रिंग का उपयोग करें। अगले पाठ में हम डायनेमिक क्लास को सुरक्षित-सूचीबद्ध करना सीखेंगे।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 30
- पाठ
- 120
अक्सर पूछे जाने वाले प्रश्न
क्या “JIT इंजन कैसे काम करता है” पाठ निःशुल्क है?
हाँ—“JIT इंजन कैसे काम करता है” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Tailwind CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“JIT इंजन कैसे काम करता है” में मैं क्या सीखूँगा?
समझें कि Tailwind v3 का डिफ़ॉल्ट JIT मोड आपकी फ़ाइलों को माँग पर कैसे स्कैन करता है और आपके मार्कअप में वास्तव में उपयोग किए गए यूटिलिटी वर्ग ही बनाता है। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Tailwind CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Tailwind CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Tailwind CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।
“JIT इंजन कैसे काम करता है” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Tailwind CSS Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Tailwind CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- JIT इंजन कैसे काम करता है
- डायनेमिक क्लास को सुरक्षित सूची में रखना
- बंडल आकार का विश्लेषण और कमी
- मनमाने मान और उनकी लागत