Tailwind CSS Academy · पाठ

Content पथ और शुद्धिकरण

यह सुनिश्चित करने के लिए content सरणी सही ढंग से कॉन्फ़िगर करें कि Tailwind सभी फ़ाइलों को स्कैन करे और प्रोडक्शन बिल्ड में अप्रयुक्त वर्ग हटा दे।

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

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

Purge करना क्यों महत्वपूर्ण है

Tailwind CSS आपके theme के मानों के हर संयोजन के लिए यूटिलिटी क्लास बनाता है — संभावित रूप से कई लाख क्लास। छँटाई के बिना कच्चा CSS आउटपुट कई मेगाबाइट का हो सकता है। purging प्रक्रिया (जिसे आधिकारिक रूप से content scanning या tree-shaking कहा जाता है) आपकी स्रोत फ़ाइलों में मौजूद न होने वाली हर क्लास हटा देती है, जिससे उत्पादन CSS आम तौर पर केवल 5–50 KB रह जाता है। हल्का build पाने के लिए अपनी content कॉन्फ़िगरेशन सही रखना आवश्यक है।

Content स्कैनिंग कैसे काम करती है

Tailwind content ऐरे में सूचीबद्ध फ़ाइलों को स्कैन करता है और ऐसे स्ट्रिंग पैटर्न खोजता है जो Tailwind क्लास नाम जैसे दिखते हैं। यह आपके कोड को चलाता नहीं है — केवल सरल टेक्स्ट खोज करता है। ज्ञात यूटिलिटी क्लास से मेल खाने वाली कोई भी स्ट्रिंग आउटपुट में शामिल कर ली जाती है। इसलिए आपको स्ट्रिंग जोड़कर क्लास नाम गतिशील रूप से कभी नहीं बनाने चाहिए; स्कैनर को पूरा क्लास नाम नहीं मिलेगा।

// BAD: Tailwind cannot detect 'text-red-500'
const color = 'red';
const cls = 'text-' + color + '-500';  // scanner sees 'text-' + 'red' + '-500'

// GOOD: Full class names are always present in source
const cls = isError ? 'text-red-500' : 'text-green-500';  // scanner sees both

Content glob पैटर्न लिखना

content ऐरे में glob पैटर्न मानक glob सिंटैक्स का उपयोग करते हैं। डबल-स्टार ** निर्देशिका स्तरों की किसी भी संख्या से मेल खाता है। घुंघराले कोष्ठक {} कई एक्सटेंशन से मेल खाते हैं। जितना संभव हो उतना विशिष्ट रहें — बहुत व्यापक पैटर्न (जैसे ./**/*) से बचें, क्योंकि वे ऐसी फ़ाइलों को शामिल करके स्कैनिंग धीमी कर देंगे जिनमें क्लास नाम नहीं हो सकते, जैसे चित्र और JSON।

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx,vue}',
    './components/**/*.{js,jsx,ts,tsx}',
    './pages/**/*.{js,jsx,ts,tsx}',
    './layouts/**/*.html',
    // Include a specific file
    './public/index.html',
    // Include node_modules (for UI library components)
    './node_modules/@my-ui/components/dist/**/*.js',
  ],
};

safelist विकल्प

कभी-कभी क्लास रनटाइम पर बनाई जाती हैं और स्थिर स्कैनिंग से उनका पता नहीं लगाया जा सकता — उदाहरण के लिए, CMS content, उपयोगकर्ता इनपुट या API प्रतिक्रियाओं से बनाए गए क्लास नाम। विशिष्ट क्लास या पैटर्न को जबरन शामिल करने के लिए safelist विकल्प का उपयोग करें, ताकि स्कैनर उन्हें खोजे या न खोजे, वे आउटपुट में हमेशा रहें। आप अलग-अलग स्ट्रिंग या regex पैटर्न को safelist में शामिल कर सकते हैं।

// tailwind.config.js
module.exports = {
  safelist: [
    // Individual classes
    'text-red-500',
    'bg-blue-100',
    // Pattern: all bg-{color}-{shade} for red and green
    {
      pattern: /bg-(red|green)-(100|200|300|400|500)/,
    },
    // Include hover variants too
    {
      pattern: /bg-red-(400|500)/,
      variants: ['hover', 'focus'],
    },
  ],
};

blocklist विकल्प

blocklist विकल्प safelist का उलटा है — यह विशिष्ट क्लास को आउटपुट में शामिल होने से रोकता है, भले ही स्कैनर उन्हें आपके स्रोत में खोज ले। यह टीम के नियम लागू करने (अप्रचलित यूटिलिटी नामों के उपयोग को रोकने) या उन यूटिलिटी को स्पष्ट रूप से बाहर करके आउटपुट का आकार घटाने में उपयोगी है जिनका आप कभी उपयोग नहीं करेंगे, जैसे कुछ फ़ॉन्ट आकार या ऐनिमेशन क्लास।

// tailwind.config.js
module.exports = {
  blocklist: [
    // Prevent these classes from being generated
    'container',
    'prose',
    'animate-bounce',
  ],
};

Content रूपांतरण

जिन फ़ाइलों को स्कैन करने से पहले पूर्व-प्रसंस्करण की आवश्यकता होती है — जैसे .pug टेम्पलेट, .md फ़ाइलें या कस्टम टेम्पलेट इंजन — उनके लिए Tailwind का content.transform विकल्प आपको एक ऐसा फ़ंक्शन देने देता है जो कच्ची फ़ाइल सामग्री को क्लास नामों वाली स्ट्रिंग में बदलता है। इसकी आवश्यकता बहुत कम पड़ती है, लेकिन ऐसे विशेष मामलों में यह शक्तिशाली है जहाँ फ़ाइल का प्रारूप क्लास नामों को असामान्य तरीके से छिपाता है।

// tailwind.config.js
module.exports = {
  content: {
    files: ['./src/**/*.{html,js}'],
    transform: {
      // Transform markdown files before scanning
      md: (content) => {
        // Render to HTML first so class names are visible
        return renderMarkdownToHtml(content);
      },
    },
  },
};

कॉम्पोनेंट लाइब्रेरी के लिए Content निष्कर्षण

यदि आपका प्रोजेक्ट ऐसी तृतीय-पक्ष कॉम्पोनेंट लाइब्रेरी का उपयोग करता है जो अंतर्निहित Tailwind क्लास वाली पहले से बनी JavaScript भेजती है, तो आपको उस लाइब्रेरी की dist फ़ाइलों को अपने content ऐरे में शामिल करना होगा। कई लोकप्रिय Tailwind कॉम्पोनेंट लाइब्रेरी (जैसे Flowbite, daisyUI या कस्टम आंतरिक लाइब्रेरी) इसी तरह काम करती हैं। उनके निर्मित JavaScript आउटपुट का पथ जोड़ें, ताकि स्कैनर यह पता लगा सके कि वे किन क्लास का उपयोग करती हैं।

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx}',
    // Include prebuilt components from a library
    './node_modules/flowbite/**/*.js',
    // Or a local package in a monorepo
    '../../packages/ui/src/**/*.{js,jsx,ts,tsx}',
  ],
};

अपनी Content कॉन्फ़िगरेशन की जाँच करना

यह सुनिश्चित करने के लिए कि आपकी content कॉन्फ़िगरेशन सही ढंग से काम कर रही है, npx tailwindcss build चलाएँ और आउटपुट फ़ाइल का आकार जाँचें। अच्छी तरह कॉन्फ़िगर किया गया उत्पादन build 50 KB से कम होना चाहिए (अक्सर इससे भी बहुत छोटा)। विकास के दौरान आप --watch फ़्लैग के साथ Tailwind CLI भी चला सकते हैं, ताकि वास्तविक समय में संकलन देख सकें और यह सुनिश्चित कर सकें कि नई क्लास जोड़ते ही वह आउटपुट में दिखाई देती है।

# Build and check output size
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify

# Check the size
wc -c < ./dist/output.css  # bytes
ls -lh ./dist/output.css   # human-readable

# Watch mode for development
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

JIT और माँग पर क्लास निर्माण

Tailwind v3 डिफ़ॉल्ट रूप से Just-In-Time (JIT) इंजन का उपयोग करता है। पुराने PurgeCSS तरीके के विपरीत, JIT आपके लिखते ही माँग पर क्लास बनाता है और विकास के दौरान आपकी content फ़ाइलों को वास्तविक समय में स्कैन करता है। इसका अर्थ है कि आपका विकास CSS पहले से ही छोटा है और उत्पादन से बिल्कुल मेल खाता है — v3 में अलग से purging चरण नहीं होता। content ऐरे विकास के दौरान स्कैनिंग और उत्पादन अनुकूलन, दोनों के लिए काम करता है।

Content कॉन्फ़िगरेशन की सामान्य गलतियाँ

सबसे सामान्य गलती content ऐरे से फ़ाइलें छूट जाना है — उन फ़ाइलों की क्लास उत्पादन में हटा दी जाती हैं। दूसरी गलती गतिशील क्लास निर्माण है, जिसमें पूरा क्लास नाम कभी स्ट्रिंग के रूप में दिखाई ही नहीं देता। तीसरी समस्या गैर-JS फ्रेमवर्क में टेम्पलेट फ़ाइलें शामिल करना भूल जाना है। तैनात करने से पहले purging संबंधी समस्याएँ पकड़ने के लिए अपने स्थानीय स्तर पर उत्पादन build को NODE_ENV=production के साथ हमेशा जाँचें।

// Common mistake: incomplete pattern
content: ['./src/**/*.js']  // MISSES .jsx, .tsx, .html files!

// Better: cover all template types
content: ['./src/**/*.{html,js,jsx,ts,tsx}']

// Also common: missing the root HTML file
content: [
  './index.html',              // don't forget this!
  './src/**/*.{js,jsx,ts,tsx}'
]

त्वरित जाँच

Tailwind के content पथों और क्लास purging की अपनी समझ जाँचें।

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

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

इस पाठ में आपने सीखा: content array Tailwind को बताता है कि क्लास नामों के लिए किन फ़ाइलों को स्कैन करना है, स्कैनर द्वारा पहचानने के लिए पूरे क्लास नाम हमेशा शाब्दिक स्ट्रिंग के रूप में मौजूद होने चाहिए, और safelist option उन क्लास को जबरन शामिल करता है जिनका स्थिर रूप से पता नहीं लगाया जा सकता। आगे हम Tailwind theme को विस्तारित करने और बदलने के बीच का अंतर समझेंगे।

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

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

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

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

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

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

क्या “Content पथ और शुद्धिकरण” पाठ निःशुल्क है?

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

“Content पथ और शुद्धिकरण” में मैं क्या सीखूँगा?

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

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

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

“Content पथ और शुद्धिकरण” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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