Boşluk

Nasıl çalışır

Boşluk ölçeği 2 pikselden 56 piksele kadar on üç adımdır. İlk adımlar (2, 4, 6) ikon ile metin arası gibi sıkı ilişkiler içindir; sonrası 4’ün katlarıyla büyür. Ölçek marka ve moddan bağımsızdır: her markada aynı ritim korunur.

Tailwind’de boşluk token’ları p-*, m-*, gap-* gibi araçlara bağlıdır: p-lg 12 piksel iç dolgu, gap-md 8 piksel aralık verir.

Token	Değer	Önizleme
--bigbang-space-none	0px
--bigbang-space-xxs İkon ile yanındaki metin	2px
--bigbang-space-xs Etiket ile yardım metni	4px
--bigbang-space-sm	6px
--bigbang-space-md Satır içi öğeler, düğme grubu	8px
--bigbang-space-lg Form alanının iç dolgusu	12px
--bigbang-space-xl Form alanları arası	16px
--bigbang-space-2xl	20px
--bigbang-space-3xl Kart iç dolgusu	24px
--bigbang-space-4xl	32px
--bigbang-space-5xl Sayfa bölümleri arası	40px
--bigbang-space-6xl	48px
--bigbang-space-7xl	56px

İlişkiye göre seçin

Birbiriyle ilgili öğeler birbirine yakın, ilgisiz öğeler uzak durur. Bir formda etiket ile alan xs, iki alan xl, iki form bölümü 4xl aralıkla ayrılır. Aralık büyüdükçe ilişki zayıflar; okuyan kişi grupları çizgiye gerek kalmadan görür.

Yoğunluk

Üye işyeri ekranları çoğunlukla tablo ve form ağırlıklıdır. Tablo satırlarında md, kart ve panellerde 3xl iç dolgu varsayılandır. Mobilde yatay sayfa kenar boşluğu xl’dir (16 piksel); masaüstünde içerik ızgarası 3xl ve üzeri kullanır.

Yönergeler

Token kullanın, piksel yazmayın

gap-md px-lg py-md

YapınToken, ölçek değişirse her yerde birlikte değişir.

gap-[7px] px-[13px]

YapmayınRastgele değerler ritmi bozar ve ölçeğin dışına çıkar.

Gruplamayı boşlukla yapın

Yapınİlgili alanlar yakın, bölümler uzak: grup kendiliğinden okunur.

YapmayınHer şey eşit aralıklı olunca etiketin hangi alana ait olduğu belirsizleşir.