Tailwind CSS Academy · पाठ

Tailwind का स्पेसिंग पैमाना

Tailwind का डिफ़ॉल्ट स्पेसिंग पैमाना (0, 0.5, 1, 2, ... 96) समझें और जानें कि यह पूर्वानुमेय अंतराल के लिए rem मानों से कैसे जुड़ता है।

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

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

स्पेसिंग स्केल क्या है

स्पेसिंग स्केल पूर्वनिर्धारित आकार मानों का एक समूह है, जिसका उपयोग किसी डिज़ाइन सिस्टम में मार्जिन, पैडिंग, गैप, चौड़ाई और ऊँचाई के लिए एकसमान रूप से किया जाता है। 13px या 17px जैसे मनमाने पिक्सेल मानों का उपयोग करने के बजाय, आप चुने हुए आकारों के समूह में से मान चुनते हैं। यह सीमा देखने में संतुलित डिज़ाइन तैयार करती है, क्योंकि सभी अंतराल मान एक मूल इकाई के गुणज होते हैं, जिससे पूरे UI में स्वाभाविक संरेखण और लय बनती है।

Tailwind का डिफ़ॉल्ट स्केल

Tailwind का स्पेसिंग स्केल 4px (0.25rem) की मूल इकाई पर आधारित है। प्रत्येक चरण संख्या 0.25rem से गुणा होती है: spacing-1 = 4px, spacing-2 = 8px, spacing-4 = 16px, spacing-8 = 32px, spacing-16 = 64px। यह स्केल 0 से 96 (384px) तक चलता है और छोटे आकारों पर सूक्ष्म नियंत्रण के लिए 0.5 (2px), 1.5 (6px), 2.5 (10px) और 3.5 (14px) जैसे भिन्नात्मक चरण भी देता है।

/* Tailwind spacing reference:
   0   = 0px
   0.5 = 2px
   1   = 4px
   2   = 8px
   3   = 12px
   4   = 16px
   6   = 24px
   8   = 32px
   12  = 48px
   16  = 64px
   24  = 96px
   32  = 128px
   48  = 192px
   64  = 256px
*/

4px के अंतराल क्यों

4px की मूल इकाई UI डिज़ाइन सिस्टम में व्यवहारतः मानक है। इसे Google के Material Design, Apple के HIG और अधिकांश प्रमुख डिज़ाइन टूल ने अपनाया है। एक ही सिस्टम पर काम करने वाले डिज़ाइनर और डेवलपर स्वाभाविक रूप से एक-दूसरे के साथ संरेखित रहते हैं: डिज़ाइनर द्वारा निर्दिष्ट 16px सीधे Tailwind के 4 से मेल खाता है (4 × 4px = 16px)। यह साझा भाषा डिज़ाइन files और कोड के बीच होने वाली रूपांतरण त्रुटि को समाप्त करती है।

<!-- Common spacing values and their Tailwind class -->
<!-- 4px  → p-1 or m-1 -->
<!-- 8px  → p-2 or m-2 -->
<!-- 12px → p-3 or m-3 -->
<!-- 16px → p-4 or m-4 -->
<!-- 24px → p-6 or m-6 -->
<!-- 32px → p-8 or m-8 -->

पैडिंग के लिए स्केल का उपयोग

स्पेसिंग स्केल का सबसे सामान्य उपयोग पैडिंग के लिए होता है। p-4 चारों ओर 16px पैडिंग जोड़ता है। यह बैज और छोटे कार्ड जैसे सघन UI तत्वों के लिए मानक पैडिंग है। आरामदायक कार्डों के लिए p-6 (24px) अच्छा रहता है। पर्याप्त खाली स्थान वाले अनुभाग कंटेनरों के लिए p-8 से p-12 तक उपयोग करें।

<span class="bg-gray-100 p-1 rounded text-xs">Dense (p-1)</span>
<div class="bg-white border p-4 rounded-lg mt-2">Standard card (p-4)</div>
<section class="bg-gray-50 p-8 mt-2">Spacious section (p-8)</section>

लेआउट के लिए स्केल मान लागू करना

यही स्पेसिंग स्केल मार्जिन और पैडिंग के अलावा कई CSS गुणों पर भी लागू होता है। gap-4 flex या grid के बच्चों के बीच 16px का अंतराल जोड़ता है। w-8 चौड़ाई 32px निर्धारित करता है। h-16 ऊँचाई 64px निर्धारित करता है। top-4 पूर्ण स्थिति वाले तत्व को ऊपर से 16px दूर रखता है। एकीकृत स्केल का अर्थ है कि ये सभी मान अपने-आप दृश्य रूप से एक-दूसरे के साथ संरेखित होते हैं।

<!-- Icon with consistent sizing from the scale -->
<div class="flex items-center gap-3">
  <div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center">
    <!-- Icon: 40px x 40px -->
  </div>
  <span class="font-medium text-gray-900">Feature Name</span>
</div>

सूक्ष्म नियंत्रण के लिए भिन्नात्मक चरण

जब आपको 4px से छोटे समायोजन चाहिए, तब Tailwind के भिन्नात्मक चरण मनमाने मानों के बिना सटीकता प्रदान करते हैं। p-0.5 (2px) छोटे टैग और बैज की तंग आंतरिक पैडिंग के लिए उपयोगी है। p-1.5 (6px) सघन और मानक पैडिंग के बीच का अंतर भरता है। p-2.5 (10px) थोड़ा अधिक खुला हुआ सघन रूप देता है। ये भिन्नात्मक आकार स्पेसिंग को डिज़ाइन सिस्टम के भीतर बनाए रखते हैं।

<span class="bg-indigo-100 text-indigo-700 text-xs font-medium px-2.5 py-0.5 rounded-full">
  Badge with fractional padding
</span>

स्केल को दृश्य रूप देना

एक उपयोगी मानसिक मॉडल: छोटी अंतःक्रियाएँ (आइकन, बैज, इनपुट पैडिंग) 1–4 (4–16px) का उपयोग करती हैं। घटक-स्तरीय स्पेसिंग (कार्ड पैडिंग, बटन पैडिंग, फ़ॉर्म फ़ील्ड गैप) 4–8 (16–32px) का उपयोग करती है। अनुभाग-स्तरीय स्पेसिंग (अनुभाग पैडिंग, हीरो मार्जिन) 12–24 (48–96px) का उपयोग करती है। पृष्ठ-स्तरीय स्पेसिंग (शीर्ष-स्तरीय कंटेनर पैडिंग) 24–32+ (96–128px) का उपयोग करती है।

स्केल का विस्तार

यदि आपको डिफ़ॉल्ट स्केल में मौजूद न होने वाला मान चाहिए, तो उसे tailwind.config.js में theme.extend.spacing के अंतर्गत जोड़ें। spacing['18'] जोड़ने पर 72px का नया चरण बनता है, जिसे p-18, m-18, w-18 आदि के रूप में उपयोग किया जा सकता है। इससे आपके अतिरिक्त मान पूरे HTML में बिखरे मनमाने मानों के बजाय डिज़ाइन सिस्टम के भीतर रहते हैं।

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '18': '72px',   // adds p-18, m-18, w-18, h-18, gap-18...
        '128': '512px', // adds p-128, m-128, w-128, h-128...
      },
    },
  },
};

मनमाने स्पेसिंग मान

ऐसी एकबारगी स्पेसिंग आवश्यकताओं के लिए जिनके लिए कॉन्फ़िगरेशन प्रविष्टि बनाना उचित न हो, मनमाने मानों का उपयोग करें: p-[13px] या mt-[22px]। मनमाने मान किसी भी मान्य CSS लंबाई इकाई को स्वीकार करते हैं: px, rem, em, %, vw, vh। पिक्सेल-स्तर की सटीकता वाले विशेष मामलों के लिए इनका सीमित उपयोग करें — बहुत अधिक मनमाने मान डिज़ाइन सिस्टम रखने के उद्देश्य को ही विफल कर देते हैं। यदि आप एक ही मनमाने मान का दो बार से अधिक उपयोग करते हैं, तो उसे कॉन्फ़िगरेशन में जोड़ें।

<!-- One-off spacing that doesn't fit the scale -->
<div class="pt-[68px]">
  Accounts for a fixed 68px header
</div>

टीमों में स्केल की एकरूपता

पूर्वनिर्धारित स्पेसिंग स्केल का उपयोग करने का सबसे बड़ा लाभ टीम की एकरूपता है। जब किसी प्रोजेक्ट के सभी डेवलपर Tailwind की स्पेसिंग क्लास का उपयोग करते हैं, तो प्रत्येक तत्व स्वाभाविक रूप से बाकी सभी तत्वों के साथ संरेखित होता है। अब 14px या 16px में से चुनने पर बहस नहीं होती — आप स्केल का उपयोग करते हैं। कोड समीक्षा आसान हो जाती है, क्योंकि मानक चरणों से बाहर का कोई भी मान तुरंत दिखाई देता है और उस पर सवाल उठाया जा सकता है।

अनुक्रियाशील डिज़ाइन में स्केल

स्पेसिंग स्केल अनुक्रियाशील उपसर्गों के साथ सहज रूप से काम करता है। आप अलग-अलग ब्रेकपॉइंट पर अलग स्पेसिंग लागू कर सकते हैं: px-4 md:px-8 lg:px-16 प्रत्येक प्रमुख ब्रेकपॉइंट पर पृष्ठ कंटेनर की पैडिंग को दोगुना करता है। यह स्केलिंग पैटर्न उस तरीके के अनुरूप है जिससे पेशेवर डिज़ाइन आमतौर पर खाली स्थान संभालते हैं — मोबाइल पर सघन और डेस्कटॉप पर अधिक खुला।

<main class="px-4 md:px-8 lg:px-16 py-8 md:py-12 lg:py-24">
  Page content scales gracefully across all devices.
</main>

त्वरित जाँच

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

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

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

इस पाठ में आपने सीखा: Tailwind का स्पेसिंग स्केल 4px (0.25rem) के अंतरालों पर आधारित है और इसकी संख्याएँ 0 से 96 तक हैं, 0.5, 1.5 और 2.5 जैसे भिन्नात्मक चरण छोटे आकारों पर सूक्ष्म नियंत्रण देते हैं, और यही स्केल पैडिंग, मार्जिन, गैप, चौड़ाई और ऊँचाई की उपयोगिताओं पर एकसमान रूप से लागू होता है। अब हम पैडिंग उपयोगिताओं और उनके सभी दिशात्मक रूपों में निपुण होंगे।

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

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

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

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

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

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

क्या “Tailwind का स्पेसिंग पैमाना” पाठ निःशुल्क है?

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

“Tailwind का स्पेसिंग पैमाना” में मैं क्या सीखूँगा?

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

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

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

“Tailwind का स्पेसिंग पैमाना” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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