Tailwind CSSBeginner
Spacing (p, m, gap)
Tailwind-এ padding, margin ও gap — spacing utilities-এর সম্পূর্ণ বাংলা গাইড।
8টি অংশবাংলা ভাষায়
Tailwind-এ spacing scale ৪px-এর গুণিতক। যেমন p-4 মানে padding: 16px (৪ × ৪ = ১৬), m-2 মানে margin: 8px (৪ × ২ = ৮)।
Spacing Scale
| Class | মান | পিক্সেল |
|---|---|---|
| p-0 / m-0 | 0 | 0px |
| p-1 / m-1 | 0.25rem | 4px |
| p-2 / m-2 | 0.5rem | 8px |
| p-3 / m-3 | 0.75rem | 12px |
| p-4 / m-4 | 1rem | 16px |
| p-5 / m-5 | 1.25rem | 20px |
| p-6 / m-6 | 1.5rem | 24px |
| p-8 / m-8 | 2rem | 32px |
| p-10 / m-10 | 2.5rem | 40px |
| p-12 / m-12 | 3rem | 48px |
Padding ও Margin
<!-- চারদিকে padding -->
<div class="p-4">padding: 16px</div>
<!-- শুধু top/bottom -->
<div class="py-2">padding-top & bottom: 8px</div>
<!-- শুধু left/right -->
<div class="px-6">padding-left & right: 24px</div>
<!-- আলাদা আলাদা -->
<div class="pt-2 pb-4 pl-6 pr-8">Individual padding</div>
<!-- Negative margin -->
<div class="-mt-4">margin-top: -16px</div>Gap (Flexbox ও Grid)
<div class="flex gap-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
<div class="grid grid-cols-3 gap-6">
<div>Col 1</div>
<div>Col 2</div>
<div>Col 3</div>
</div>mnemonic
p = padding (ভেতরের), m = margin (বাইরের), gap = flex/grid items-এর মাঝের ফাঁক। সংখ্যা বাড়লে জায়গা বাড়ে।
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।