Spacing és méretezés
Tailwind spacing skála, padding, margin, width, height, max-width.
Spacing és méretezés
A Tailwind spacing skála
A Tailwind egy 4px-alapú spacing skálát használ, ahol 1 = 4px:
| Class | Érték |
|---|---|
p-0 | 0px |
p-1 | 4px |
p-2 | 8px |
p-4 | 16px |
p-6 | 24px |
p-8 | 32px |
p-12 | 48px |
p-16 | 64px |
Ez a konzisztencia az egyik legnagyobb előnye a Tailwind-nek: mindig a skálán belül maradsz.
Padding
<div class="p-4">minden oldalon 16px padding</div>
<div class="px-4">vízszintes (bal + jobb) padding</div>
<div class="py-4">függőleges (felső + alsó) padding</div>
<div class="pt-4 pb-8 pl-2 pr-6">minden oldal külön</div>Margin
Ugyanaz a szisztéma, m prefix-szel:
<div class="m-4">minden oldalon 16px margin</div>
<div class="mx-auto">automatikus vízszintes margin (középre rendez)</div>
<div class="mt-8 mb-4">felső és alsó margin</div>
<div class="ml-0 mr-auto">balra igazít a flex containerben</div>Negatív margin is lehetséges:
<div class="-mt-2">-8px felső margin (pl. átfedő elemekhez)</div>Width és Height
<!-- Fix méretek -->
<div class="w-4">16px széles</div>
<div class="w-64">256px széles</div>
<div class="h-12">48px magas</div>
<!-- Százalékos méretek -->
<div class="w-1/2">50% széles</div>
<div class="w-1/3">33.33% széles</div>
<div class="w-2/3">66.66% széles</div>
<!-- Teljes szélesség/magasság -->
<div class="w-full">100% széles</div>
<div class="h-full">100% magas</div>
<!-- Viewport egységek -->
<div class="w-screen h-screen">100vw × 100vh</div>
<div class="min-h-screen">legalább 100vh magas</div>Max-width
<div class="max-w-sm">384px max-width</div>
<div class="max-w-md">448px max-width</div>
<div class="max-w-lg">512px max-width</div>
<div class="max-w-xl">576px max-width</div>
<div class="max-w-2xl">672px max-width</div>
<div class="max-w-4xl">896px max-width</div>
<div class="max-w-7xl">1280px max-width</div>
<div class="max-w-full">100% max-width</div>
<div class="max-w-prose">65ch – optimális olvasási szélesség</div>Responsive méretek
A méreteket breakpoint prefix-szel responsive-á teheted:
<div class="w-full md:w-1/2 lg:w-1/3">
<!-- Mobilon: 100% | Tableten: 50% | Desktopon: 33% -->
</div>Összefoglaló
A Tailwind spacing skálája (
p-4,m-8,w-1/2) konzisztens designt biztosít. Azmx-auto+max-w-7xlkombináció a legelterjedtebb pattern egy oldal tartalomterének korlátozásához. Mindig a skálán belül maradj – ha17px-re van szükséged, gondold át, hogy valóban szükséges-e, vagy16pxis megteszi.