चौड़ाई यूटिलिटी
w-4, w-64 आदि से निश्चित चौड़ाई सेट करें, w-1/2 जैसी भिन्नात्मक चौड़ाइयों का उपयोग करें और w-full तथा w-screen से पूरी चौड़ाई तक फैलाएँ।
चौड़ाई यूटिलिटी, CoddyKit पर Tailwind CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Tailwind CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
Tailwind में चौड़ाई नियंत्रित करना
CSS में तत्वों की चौड़ाई निर्धारित करना सबसे सामान्य लेआउट कार्यों में से एक है। Tailwind w-* उपयोगिताओं का ऐसा समूह देता है, जिसमें निश्चित आकार, भिन्नात्मक आकार, प्रतिशत-आधारित आकार और व्यूपोर्ट-सापेक्ष आकार शामिल हैं। पिक्सेल मान याद करने के बजाय आप Tailwind के एकसमान अंतराल पैमाने और अर्थपूर्ण कीवर्ड के साथ काम करते हैं, जो अच्छी तरह डिज़ाइन किए गए CSS मानों से जुड़े होते हैं।
<!-- Width examples side by side -->
<div class="space-y-2">
<div class="w-32 bg-blue-100 p-2">w-32 (128px)</div>
<div class="w-1/2 bg-blue-200 p-2">w-1/2 (50%)</div>
<div class="w-full bg-blue-300 p-2">w-full (100%)</div>
</div>अंतराल पैमाने से निश्चित चौड़ाई
निश्चित चौड़ाइयाँ Tailwind के अंतराल पैमाने का अनुसरण करती हैं, जहाँ प्रत्येक इकाई 4px (0.25rem) के बराबर होती है। इसलिए w-4 16px, w-16 64px और w-64 256px होता है। यह पैमाना w-96 (384px) तक जाता है। ये मान आइकन, अवतार, साइडबार और ऐसे किसी भी तत्व के लिए उपयुक्त हैं जिसका आकार पहले से ज्ञात और निश्चित हो तथा जो व्यूपोर्ट की चौड़ाई के साथ न बदले।
<!-- Fixed-size avatar and sidebar examples -->
<div class="flex gap-4 items-center">
<!-- Avatar: 12 x 12 = 48px -->
<div class="w-12 h-12 rounded-full bg-indigo-400 flex items-center justify-center text-white font-bold">
JD
</div>
<!-- Sidebar: 64 = 256px -->
<div class="w-64 bg-gray-100 p-4 rounded">
Sidebar panel (256px)
</div>
</div>भिन्नात्मक चौड़ाइयाँ
भिन्नात्मक चौड़ाई उपयोगिताएँ चौड़ाई को मूल कंटेनर के एक अंश के रूप में व्यक्त करती हैं। Tailwind आधे (w-1/2), एक-तिहाई (w-1/3, w-2/3), एक-चौथाई (w-1/4 से w-3/4 तक), एक-पाँचवाँ और एक-छठा भाग समर्थित करता है। ये प्रतिशत मानों में संकलित होती हैं — उदाहरण के लिए, w-1/3 का परिणाम width: 33.333333% होता है — इसलिए ये साथ-साथ रखे गए स्तंभों वाले लेआउट के लिए आदर्श हैं।
<!-- Two-thirds / one-third split layout -->
<div class="flex gap-4">
<div class="w-2/3 bg-emerald-100 p-4 rounded">Main (2/3 wide)</div>
<div class="w-1/3 bg-emerald-200 p-4 rounded">Sidebar (1/3 wide)</div>
</div>w-full और w-screen
w-full मूल कंटेनर की चौड़ाई के 100% पर चौड़ाई निर्धारित करता है, जबकि w-screen चौड़ाई को 100vw (व्यूपोर्ट की चौड़ाई) पर निर्धारित करता है। यह अंतर तब महत्वपूर्ण होता है जब मूल कंटेनर पूरा व्यूपोर्ट न हो: w-full मूल कंटेनर को भरता है, लेकिन w-screen हमेशा पूरे ब्राउज़र विंडो को भरता है और स्क्रॉलबार होने पर क्षैतिज अतिप्रवाह पैदा कर सकता है। पूर्ण-व्यूपोर्ट ओवरले के लिए w-screen और बाकी सभी स्थितियों के लिए w-full का उपयोग करें।
<!-- w-full fills the parent, regardless of parent width -->
<div class="w-1/2 bg-gray-100 p-4">
<button class="w-full bg-blue-500 text-white py-2 rounded">
Full-width button inside half-width parent
</button>
</div>
<!-- w-screen fills the entire viewport -->
<div class="w-screen bg-indigo-800 text-white py-3 text-center">
Full-viewport-width banner
</div>प्राकृतिक चौड़ाई के लिए w-auto
w-auto तत्व को अपनी प्राकृतिक या सामग्री-आधारित चौड़ाई लेने देता है। अधिकांश ब्लॉक तत्वों के लिए यह ब्राउज़र का डिफ़ॉल्ट है, लेकिन किसी अन्य ब्रेकपॉइंट पर निर्धारित अधिक चौड़ाई को ओवरराइड करने के लिए आपको इसे स्पष्ट रूप से लागू करना पड़ सकता है। इसका सामान्य उपयोग मोबाइल पर w-full से डेस्कटॉप पर स्वतः आकार निर्धारण में वापस जाते समय होता है, जैसे ऐसे बटन में जिसकी चौड़ाई केवल उसके पाठ जितनी होनी चाहिए।
<!-- Full-width on mobile, natural width on desktop -->
<button class="w-full md:w-auto bg-purple-500 text-white px-6 py-3 rounded">
Get Started
</button>w-fit, w-min और w-max
तीन आधुनिक चौड़ाई कीवर्ड तत्वों को सामग्री के आधार पर अपना आकार निर्धारित करने में सहायता करते हैं: w-fit तत्व को उसकी सामग्री जितना चौड़ा बनाता है (जैसे fit-content), w-min चौड़ाई को न्यूनतम सामग्री आकार पर रखता है (और सबसे लंबे अविभाज्य शब्द तक सिमट जाता है), जबकि w-max बिना पंक्ति-विराम के सामग्री की अधिकतम चौड़ाई तक फैलता है। ये टैग, पिल, टूलटिप और इनलाइन लेबल के लिए उपयोगी हैं।
<!-- Tags that size to their text content -->
<div class="flex gap-2">
<span class="w-fit bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">
Design
</span>
<span class="w-fit bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">
Development
</span>
<span class="w-fit bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">
Marketing
</span>
</div>मनमाने चौड़ाई मान
जब अंतर्निहित पैमाना आपकी सटीक आवश्यकता पूरी न करे, तो मनमाने मान का सिंटैक्स उपयोग करें: w-[347px] या w-[calc(100%-2rem)]। JIT इंजन में यह ठीक उसी CSS मान में संकलित होता है। यह सुविधाजनक है, लेकिन मनमाने मान डिज़ाइन प्रणाली को दरकिनार करते हैं, इसलिए इनका सीमित उपयोग करें — पहले जाँच लें कि कोई भिन्नात्मक या निश्चित पैमाने का मान वही दृश्य परिणाम दे सकता है या नहीं।
<!-- One-off width for a specific UI element -->
<div class="w-[280px] bg-amber-100 p-4 rounded">
Tooltip or popover of exact width
</div>
<!-- Calc inside brackets -->
<div class="w-[calc(100%-3rem)] bg-amber-200 p-4 rounded">
Full width minus 3rem padding
</div>उत्तरदायी चौड़ाई परिवर्तन
उत्तरदायी उपसर्गों को चौड़ाई उपयोगिताओं के साथ मिलाना Tailwind के सबसे शक्तिशाली पैटर्नों में से एक है। एक सामान्य पैटर्न w-full sm:w-1/2 lg:w-1/3 है: मोबाइल पर पूरी चौड़ाई, छोटी स्क्रीन पर आधी और बड़ी स्क्रीन पर एक-तिहाई। इससे बिना किसी मीडिया क्वेरी CSS के, उपयोगिता वर्गों के एक ही समूह से उत्तरदायी कार्ड लेआउट बन जाता है।
<!-- Responsive-width cards in a flex wrap container -->
<div class="flex flex-wrap gap-4">
<div class="w-full sm:w-1/2 lg:w-1/3 bg-rose-100 p-6 rounded">
Card A
</div>
<div class="w-full sm:w-1/2 lg:w-1/3 bg-rose-100 p-6 rounded">
Card B
</div>
<div class="w-full sm:w-1/2 lg:w-1/3 bg-rose-100 p-6 rounded">
Card C
</div>
</div>पठनीय सामग्री के लिए max-w-*
जहाँ w-* सटीक चौड़ाई निर्धारित करता है, वहीं max-w-* ऊपरी सीमा निर्धारित करता है। सबसे महत्वपूर्ण अधिकतम-चौड़ाई उपयोगिता max-w-prose है, जो पाठ को प्रति पंक्ति लगभग 65 अक्षरों तक सीमित करती है — टाइपोग्राफी शोधकर्ताओं द्वारा पहचानी गई पठनीयता की आदर्श सीमा। max-w-sm से max-w-7xl तक के मान सामान्य डिज़ाइन ब्रेकपॉइंट से मेल खाने वाली अर्थपूर्ण कंटेनर चौड़ाइयाँ देते हैं।
<!-- Readable article column with max-width -->
<article class="max-w-prose mx-auto px-4">
<h1 class="text-2xl font-bold mb-4">Article Title</h1>
<p class="text-gray-700 leading-relaxed">
This paragraph stays at a comfortable reading width regardless
of the viewport size. max-w-prose limits it to about 65 characters
per line for optimal readability.
</p>
</article>Flex कंटेनरों में चौड़ाई
Flex कंटेनर के भीतर w-* वर्ग flex-grow और flex-shrink के साथ परस्पर क्रिया करते हैं। w-full वाला बच्चा 100% चौड़ा होने का प्रयास करेगा, लेकिन Flex कंटेनर उसे सिकोड़ सकता है। सिकुड़ने से रोकने के लिए चौड़ाई वाले वर्ग के साथ shrink-0 जोड़ें। यह पैटर्न आम तौर पर उन आइकन और अवतारों के लिए उपयोग किया जाता है जिन्हें कभी दबना नहीं चाहिए, जबकि साथ का पाठ शेष जगह लेता है।
<!-- Icon stays fixed width, text takes remaining space -->
<div class="flex items-center gap-3 p-4 border rounded">
<!-- Icon: fixed 40px, never shrinks -->
<div class="w-10 h-10 shrink-0 bg-blue-500 rounded-full flex items-center justify-center">
<span class="text-white font-bold">AI</span>
</div>
<!-- Text: takes all remaining width -->
<div class="min-w-0">
<p class="font-semibold truncate">Long title that might overflow</p>
<p class="text-sm text-gray-500">Subtitle text</p>
</div>
</div>निश्चित-चौड़ाई वाले तत्वों को केंद्रित करना
एक पारंपरिक लेआउट पैटर्न पृष्ठ के बीच में रखा गया निश्चित-चौड़ाई वाला कंटेनर है। अधिकतम-चौड़ाई वाली उपयोगिता और mx-auto (स्वचालित क्षैतिज मार्जिन) का संयोजन इसे साफ़-सुथरे ढंग से पूरा करता है। सभी स्क्रीन आकारों पर आरामदायक किनारे की पैडिंग के साथ बीच में स्थित, पढ़ने योग्य कॉलम बनाने के लिए अपनी पृष्ठ सामग्री को max-w-5xl mx-auto px-4 में रखें।
<!-- Classic centered page layout -->
<div class="max-w-5xl mx-auto px-4 py-8">
<header class="mb-6">
<h1 class="text-3xl font-bold">Page Title</h1>
</header>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-gray-100 p-4 rounded">Column 1</div>
<div class="bg-gray-100 p-4 rounded">Column 2</div>
<div class="bg-gray-100 p-4 rounded">Column 3</div>
</div>
</div>त्वरित जाँच
इस पाठ में सिखाई गई Tailwind CSS Mastery की अवधारणाओं की अपनी समझ जाँचें।
पाठ का पुनरावलोकन
इस पाठ में आपने सीखा: w-* की निश्चित उपयोगिताएँ w-96 तक 4px वाली स्पेसिंग स्केल का पालन करती हैं, w-1/2 जैसी भिन्नात्मक उपयोगिताएँ पैरेंट के सापेक्ष प्रतिशत चौड़ाई निर्धारित करती हैं, और w-full, w-screen, w-fit, w-min तथा w-max अर्थपूर्ण आकार-निर्धारण की आवश्यकताओं को पूरा करते हैं। अब हम चौड़ाई नियंत्रणों के पूरक ऊँचाई उपयोगिताओं का अध्ययन करेंगे।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 30
- पाठ
- 120
अक्सर पूछे जाने वाले प्रश्न
क्या “चौड़ाई यूटिलिटी” पाठ निःशुल्क है?
हाँ—“चौड़ाई यूटिलिटी” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Tailwind CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“चौड़ाई यूटिलिटी” में मैं क्या सीखूँगा?
w-4, w-64 आदि से निश्चित चौड़ाई सेट करें, w-1/2 जैसी भिन्नात्मक चौड़ाइयों का उपयोग करें और w-full तथा w-screen से पूरी चौड़ाई तक फैलाएँ। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Tailwind CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Tailwind CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Tailwind CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।
“चौड़ाई यूटिलिटी” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Tailwind CSS Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Tailwind CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- चौड़ाई यूटिलिटी
- ऊँचाई यूटिलिटी
- न्यूनतम और अधिकतम सीमाएँ
- आस्पेक्ट अनुपात