PricingLoginStart free
Tailwind CSS Academy · पाठ

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

डिफ़ॉल्ट पैमाने की कमियाँ भरने के लिए theme में spacing.18 या spacing.128 जैसे प्रोजेक्ट-विशिष्ट स्पेसिंग मान जोड़ें।

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

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

Tailwind का डिफ़ॉल्ट Spacing Scale

Tailwind का डिफ़ॉल्ट spacing scale 0 से 96 तक के मानों को कवर करता है (छोटे मानों के लिए 0 से 24rem तक 0.25rem की वृद्धि में, फिर बड़े अंतरालों के साथ)। इस scale का उपयोग margin, padding, width, height, gap और positioning utilities में एकसमान रूप से किया जाता है। ये मान UI की अधिकांश spacing आवश्यकताओं को पूरा करने के लिए बनाए गए हैं, लेकिन वास्तविक designs में कभी-कभी ऐसे मानों की आवश्यकता होती है जो डिफ़ॉल्ट मानों के बीच या उनसे आगे हों।

/* Tailwind default spacing examples */
spacing.0   = 0px
spacing.0.5 = 2px
spacing.1   = 4px
spacing.2   = 8px
spacing.4   = 16px
spacing.8   = 32px
spacing.16  = 64px
spacing.32  = 128px
spacing.64  = 256px
spacing.96  = 384px

Custom Spacing की आवश्यकता क्यों होती है

Design systems में अक्सर डिफ़ॉल्ट scale से बाहर के spacing values की आवश्यकता होती है — full-page hero sections के लिए 128 मान (32rem), किसी विशिष्ट element के लिए 4.5 मान (18px), जो standard 4 (16px) और 5 (20px) के बीच आता है, या किसी specific grid column width के लिए 13 मान। हर बार bracket notation के साथ arbitrary values उपयोग करने के बजाय, इन values को config में एक बार जोड़ें और उन्हें साफ़ utility class name दें।

Config में Custom Spacing जोड़ना

Custom spacing values को theme.extend.spacing के अंदर जोड़ें। Key सभी spacing utilities में suffix बन जाती है और value वह CSS measurement होती है जो आप चाहते हैं। Decimal या बड़े numbers के लिए string keys का उपयोग करें, ताकि उनका सही अर्थ निकाला जाए। जोड़ने के बाद आपका custom spacing m-*, p-*, w-*, h-*, gap-*, inset-* और अन्य सभी spacing utilities में अपने-आप काम करेगा।

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '4.5':  '1.125rem', // 18px — between default 4 and 5
        '13':   '3.25rem',  // 52px
        '128':  '32rem',    // 512px — for large hero sections
        '144':  '36rem',    // 576px
        '160':  '40rem',    // 640px
      },
    },
  },
};

Custom Spacing Utilities का उपयोग करना

Custom spacing values जोड़ने के बाद, उनका उपयोग ठीक built-in spacing utilities की तरह करें। Key name utility prefix और hyphen के बाद आता है। Custom spacing responsive prefixes, dark mode और state variants के साथ भी डिफ़ॉल्ट values की तरह काम करता है। Cross-utility प्रकृति का अर्थ है कि आप config में एक बार लिखकर उसी definition से padding, margin, width, height और gap utilities प्राप्त कर सकते हैं।

<!-- Using custom spacing values -->
<div class="p-4.5 m-13">   <!-- 18px padding, 52px margin -->
  Custom spacing in padding and margin
</div>

<section class="min-h-128">    <!-- 512px minimum height -->
  Full hero section
</section>

<div class="grid grid-cols-3 gap-4.5">
  <!-- 18px gap between grid items -->
</div>

पूर्ण Spacing Scale को Override करना

सख्त design systems वाले projects में, जिन्हें केवल specific spacing values का उपयोग करना होता है, पूरी spacing scale को override करने के लिए अपनी values सीधे theme.spacing में रखें (extend के बाहर)। इससे यह सुनिश्चित होता है कि कोई developer गलती से आपकी स्वीकृत सूची से बाहर की spacing value का उपयोग न करे। इस तरीके का सावधानी से उपयोग करें — Tailwind के defaults हटाने से आम तौर पर आवश्यक कई utility classes उपलब्ध नहीं रहेंगी।

// Strict spacing system: only these values are available
module.exports = {
  theme: {
    spacing: {
      '0':  '0px',
      '1':  '4px',
      '2':  '8px',
      '3':  '12px',
      '4':  '16px',
      '6':  '24px',
      '8':  '32px',
      '12': '48px',
      '16': '64px',
      '24': '96px',
    },
  },
};

Fractional और Decimal Spacing Keys

Tailwind '4.5' जैसी fractional keys को संभालकर decimal के CSS-safe version वाली utility classes generate करता है। Class name में fraction उसी रूप में उपयोग होता है: p-4.5, m-4.5। Slash वाली keys (जैसे percentage-based spacing के fractions) में slash को CSS selector में encode किया जाता है। Config object में decimal और fraction keys को हमेशा strings के रूप में quote करें, ताकि JavaScript उन्हें numeric literals न समझे।

// tailwind.config.js
spacing: {
  '0.5':  '2px',   // p-0.5, m-0.5 (already in defaults)
  '1.5':  '6px',   // p-1.5, m-1.5 (already in defaults)
  '4.5':  '1.125rem', // CUSTOM: p-4.5
  '13':   '3.25rem',  // CUSTOM: p-13
  '18':   '4.5rem',   // CUSTOM: p-18
  '22':   '5.5rem',   // CUSTOM: p-22
}

Negative Spacing Values

Tailwind सभी spacing values, default और custom दोनों, के लिए negative variants अपने-आप generate करता है। यदि आप अपने spacing config में '128': '32rem' जोड़ते हैं, तो आपको -m-128, -mt-128, -inset-128 आदि भी मिलते हैं। Negative values अपने-आप generate होती हैं — इनके लिए अलग config entry की आवश्यकता नहीं होती। ये overlapping elements, pull quotes और सजावटी positioning के लिए विशेष रूप से उपयोगी हैं।

<!-- Negative spacing pulls elements outside their container -->
<div class="relative">
  <div class="bg-blue-100 p-8">
    Main content
    <!-- This element extends 4px outside the parent top -->
    <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full px-1.5 py-0.5">
      NEW
    </span>
  </div>
</div>

Font Size के सापेक्ष Spacing

कभी-कभी आप ऐसे spacing values चाहते हैं जो fixed rem values के बजाय text size के साथ scale हों। Config में em units का उपयोग करके spacing values जोड़ें — ये element के अपने font size के सापेक्ष होंगी। उदाहरण के लिए, px-1.5em padding वाले button में button text छोटा हो या बड़ा, उसकी horizontal padding समानुपातिक रहेगी।

// tailwind.config.js
spacing: {
  // em-based spacing (relative to font-size)
  '0.25em': '0.25em',
  '0.5em':  '0.5em',
  '0.75em': '0.75em',
  '1em':    '1em',
  '1.25em': '1.25em',
  '1.5em':  '1.5em',
  '2em':    '2em',
}

Design System Grids के लिए Spacing

जब आपका design 8px grid system (या 4px base unit) पर आधारित हो, तो पूरी grid को अपने spacing config में map करें। 8px grid का अर्थ है कि सभी spacing values 8px के गुणज हों: 8, 16, 24, 32, 40, 48, 64, 80, 96, 128। Tailwind का डिफ़ॉल्ट spacing scale पहले से ही इसके अनुरूप है (1 unit = 4px, इसलिए 2 = 8px, 4 = 16px, 6 = 24px, 8 = 32px)। आपको केवल 96 से ऊपर के values के साथ extend करने की आवश्यकता हो सकती है।

// 8px grid — Tailwind already aligns, just extend for larger values
spacing: {
  // Already in defaults (4px base unit):
  // 2=8px, 4=16px, 6=24px, 8=32px, 10=40px, 12=48px, 16=64px, 20=80px, 24=96px

  // Extend for larger sections
  '112': '28rem',  // 448px (= 56 units of 8px)
  '128': '32rem',  // 512px
  '160': '40rem',  // 640px
  '192': '48rem',  // 768px
  '224': '56rem',  // 896px
  '256': '64rem',  // 1024px
}

विकल्प के रूप में Arbitrary Values

जब आपको केवल एक बार उपयोग होने वाली spacing value चाहिए और आप अपने config को अनावश्यक values से नहीं भरना चाहते, तो square brackets के साथ Tailwind का arbitrary value syntax उपयोग करें: p-[22px], w-[347px], mt-[3.75rem]। इससे config में जोड़े बिना ठीक वही CSS value generate होती है। Arbitrary values एक बार के overrides के लिए आदर्श हैं, लेकिन इन्हें आदत न बनने दें — यदि आप एक ही value का तीन या अधिक बार उपयोग करते हैं, तो उसे config में जोड़ें।

<!-- Arbitrary values for truly one-off sizes -->
<div class="p-[22px] w-[347px] mt-[3.75rem]">
  One-off dimensions from design spec
</div>

<!-- Prefer config-based values for repeated use -->
<!-- BAD: p-[22px] used in 15 components -->
<!-- GOOD: Add '22': '1.375rem' to spacing config, use p-22 everywhere -->

अपने Spacing System का दस्तावेज़ीकरण करना

जैसे-जैसे आपका custom spacing बढ़ता है, इसे अपने color और typography tokens के साथ document करें। अपने Storybook, design system docs या किसी static HTML page में एक सरल visual spacing reference बनाएँ, जो प्रत्येक spacing value को colored block के रूप में दिखाए। इससे designers और developers arbitrary values या असंगत one-off values चुनने के बजाय config से सही value का उपयोग कर पाएँगे।

<!-- Simple spacing token preview -->
<div class="space-y-2">
  <div class="flex items-center gap-4">
    <div class="bg-blue-200 h-4" style="width: 1.125rem;"></div>
    <span class="text-sm font-mono">spacing.4.5 = 1.125rem (18px)</span>
  </div>
  <div class="flex items-center gap-4">
    <div class="bg-blue-400 h-4" style="width: 3.25rem;"></div>
    <span class="text-sm font-mono">spacing.13 = 3.25rem (52px)</span>
  </div>
</div>

त्वरित जाँच

Tailwind CSS में custom spacing values की अपनी समझ का परीक्षण करें।

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

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

इस पाठ में आपने सीखा: डिफ़ॉल्ट स्केल को बदले बिना उसका विस्तार करने के लिए theme.extend.spacing में कस्टम स्पेसिंग जोड़ना, कस्टम स्पेसिंग सभी स्पेसिंग यूटिलिटी (पैडिंग, मार्जिन, चौड़ाई, ऊँचाई, गैप) में अपने-आप काम करती है, और वास्तव में केवल एक बार उपयोग होने वाले मापों के लिए ब्रैकेट नोटेशन वाले मनमाने मान एक अच्छा विकल्प हैं। अब हम Tailwind में डिज़ाइन टोकन के रूप में CSS कस्टम प्रॉपर्टीज़ का अध्ययन करेंगे।

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

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

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

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

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

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

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

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

डिफ़ॉल्ट पैमाने की कमियाँ भरने के लिए theme में spacing.18 या spacing.128 जैसे प्रोजेक्ट-विशिष्ट स्पेसिंग मान जोड़ें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Tailwind CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

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

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

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

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

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

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

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

  1. कस्टम रंग जोड़ना
  2. कस्टम फ़ॉन्ट परिवार
  3. कस्टम स्पेसिंग मान
  4. Tailwind में CSS चर का उपयोग
← Tailwind CSS Academy पर वापस जाएँ