Tailwind Preflight: Neleri Sıfırlar, Nasıl Genişletilir?

Preflight nereden gelir?

Resmî Preflight sayfasına göre bu stil dosyası modern-normalize üzerine kurulmuştur ve tarayıcılar arası tutarsızlıkları gidermeyi amaçlar. @import "tailwindcss"; satırı aslında üç dosyayı katmanlarıyla birlikte içe aktarır ve Preflight bunların ortasındadır:

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

Katman sırası önemlidir. CSS katmanlarında sonra ilan edilen katman, seçici özgüllüğünden bağımsız olarak önce ilan edilenin üzerine yazar. Preflight base katmanında, utility sınıfları utilities katmanında olduğu için örneğin Preflight'ın h1 için koyduğu boyut, text-3xl sınıfıyla her zaman ezilir. Saf CSS katman mantığını CSS @layer yazısında, Tailwind katmanlarına kendi CSS'inizi yerleştirmeyi katmanlar yazısında bulabilirsiniz.

Herkese uygulanan sıfırlama

v4.3.5 çıktısındaki @layer base bloğu şu kuralla başlar:

@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  /* (kısaltıldı) */
}

Bu dört bildirim Tailwind ile çalışırken alışmanız gereken temel davranışları belirler. box-sizing: border-box, genişlik ve yüksekliğin padding ile kenarlığı da içermesini sağlar; w-64 verdiğiniz bir kutu, padding eklediğinizde büyümez. Margin ve padding sıfırlaması, paragrafların, başlıkların ve alıntıların tarayıcıdan gelen boşluklarını kaldırır. Belge bunun gerekçesini, boşlukların tarayıcı varsayılanlarından değil kendi boşluk ölçeğinizden gelmesi olarak açıklar. Bütün boşluğu artık mt-4, space-y-2 gibi sınıflarla siz verirsiniz; bunlar padding ve margin yazısında anlatılır.

border 0 solid neden var?

Kenarlık sıfırlaması ilk bakışta tuhaf görünür: kenarlık genişliği sıfır ama stil solid. Nedeni, border sınıfının nasıl derlendiğinde gizlidir. Aynı sürümle border border-red-500 derlediğimizde şu kurallar üretildi:

@layer utilities {
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-red-500 {
    border-color: var(--color-red-500);
  }
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

border sınıfı genişliği 1px yapar ve stili --tw-border-style değişkeninden okur; bu değişkenin başlangıç değeri solid'dir. Preflight'taki border: 0 solid sıfırlaması da renk belirtmediği için kenarlık rengi geçerli metin rengine (currentColor) düşer. Resmî belge bu düzenin, border sınıfının her zaman metin renginde düz 1px bir çizgi vermesini sağladığını anlatır. Kenarlık sınıflarının tamamı border ve rounded yazısında ele alınır.

Belge aynı sıfırlamanın bazı üçüncü taraf kütüphanelerle (örnek olarak Google Maps) çakışabileceğini de not eder. Böyle bir durumda kendi base katmanınızda ilgili alan için sıfırlamayı geri alabilirsiniz:

@layer base {
  .google-map * {
    border-style: none;
  }
}

Başlıklar, bağlantılar ve metin elemanları

Preflight'ın metinle ilgili kuralları, tarayıcının "anlamsal" etiketlere verdiği görünümü büyük ölçüde kaldırır. v4.3.5 çıktısından ilgili parçalar:

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  small {
    font-size: 80%;
  }

Başlıklar boyutlarını ve kalınlıklarını üst elemandan miras alır; yani sınıf vermediğiniz bir <h1> paragrafla aynı görünür. Belge iki gerekçe sunar: tarayıcının varsayılan başlık boyutları çoğu zaman sizin yazı ölçeğinize uymaz ve arayüz tasarımında başlıklar sık sık bilerek sade tutulur; bu yüzden başlık stilinin her zaman bilinçli bir seçim olması amaçlanır. Bağlantılar da rengini ve alt çizgisini çevresindeki metinden alır, mavi ve altı çizili görünmez. Buna karşılık <b> ve <strong> kalınlığını korur, <small> yüzde 80 boyutta kalır.

Kök eleman için ayrıca bir kural vardır: html, :host üzerinde line-height: 1.5 ve font-family: var(--default-font-family, ...) tanımlanır. Derleme çıktısında --default-font-family değişkeni var(--font-sans) değerine bağlanır. Böylece sayfanın varsayılan yazı tipi tema değişkeniyle değiştirilebilir; bu font yazısında gösterilir. code, kbd, samp ve pre ise --default-mono-font-family üzerinden eş aralıklı yazı tipini kullanır.

Listeler ve erişilebilirlik

Sıralı ve sırasız listeler ile menu elemanı madde işaretlerini kaybeder:

  ol, ul, menu {
    list-style: none;
  }

Madde işareti istediğiniz listede bunu sınıflarla geri alırsınız. Belgedeki örnek list-inside list-disc kullanır; derlemede bu iki sınıf list-style-position: inside ve list-style-type: disc üretti.

<ul class="list-inside list-disc">
  <li>Bir</li>
  <li>İki</li>
  <li>Üç</li>
</ul>

Resmî sayfa burada önemli bir erişilebilirlik notu düşer: VoiceOver ekran okuyucusu, stili kaldırılmış listeleri liste olarak duyurmaz. İçerik gerçekten bir listeyse ve görünümü sade kalacaksa, <ul> elemanına role="list" eklemeniz önerilir. Bu, gezinme menüleri ve kart listeleri gibi sık kullanılan sade listelerde kolayca unutulan bir ayrıntıdır. Diğer erişilebilirlik sınıfları erişilebilirlik yazısında toplanmıştır.

<ul role="list">
  <li>Bir</li>
  <li>İki</li>
</ul>

Resimler ve gömülü içerik

  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }

Resimler ve diğer değiştirilmiş elemanlar varsayılan olarak satır içi elemandır ve metin taban çizgisine hizalandıkları için altlarında küçük bir boşluk kalır. Preflight bunları blok eleman yaparak bu boşluğu ortadan kaldırır. İkinci kural resim ve videoların kapsayıcılarından taşmasını engeller ve en-boy oranlarını korur. Bir resmi metin içinde satır içi göstermek isterseniz inline sınıfını, taşma sınırlamasını kaldırmak isterseniz max-w-none sınıfını kullanırsınız; ikisi de derlemede sırasıyla display: inline ve max-width: none üretti. Display sınıflarının tamamı display yazısında anlatılır.

Form elemanları ve diğer ayrıntılar

Düğmeler, giriş kutuları ve seçim listeleri tarayıcıların en çok farklılaştığı elemanlardır. Preflight bunlara ortak bir başlangıç verir:

  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  textarea {
    resize: vertical;
  }

Sonuç olarak sınıf vermediğiniz bir düğme arka plansız, kenarlıksız ve çevresindeki metinle aynı yazı tipinde görünür; ilk kez Tailwind kullananlar düğmelerinin "kaybolduğunu" düşünebilir. Bu bilinçli bir sıfırlamadır ve düğme görünümünü sınıflarla siz kurarsınız. Hazır kalıplar için kart, buton ve input örnekleri yazısına, form durum varyantları için form stilleri yazısına bakabilirsiniz.

Placeholder metni için de bir kural vardır: ::placeholder önce tam opak yapılır, ardından @supports koşulu sağlanan tarayıcılarda rengi color-mix(in oklab, currentcolor 50%, transparent) ile metin renginin yarı saydam haline getirilir. Bunların yanında hr için 1px üst kenarlık, table için border-collapse: collapse, summary için display: list-item ve WebKit tarih alanlarına yönelik birkaç düzeltme bulunur.

hidden özelliği

  [hidden]:where(:not([hidden='until-found'])) {
    display: none !important;
  }

Bu kural hidden HTML özelliği taşıyan elemanların, kendilerine bir display sınıfı verilse bile gizli kalmasını sağlar; bildirim !important olduğu için utility sınıfları da bunu ezemez. Belgeye göre istisna hidden="until-found" değeridir. Bir elemanı görünür yapmak için sınıf eklemek yerine özelliği kaldırmanız gerekir.

Uygulamalı örnek: sıfırlanmış elemanlara görünüm vermek

Preflight'ın pratikteki etkisini görmek için bir duyuru kutusu yazalım. Kutuda bir başlık, madde işaretli bir liste ve bir bağlantı var. Preflight bunların üçünün de tarayıcı görünümünü kaldırdığı için, her birine istediğimiz görünümü sınıflarla tek tek veriyoruz:

<article class="p-6">
  <h2 class="text-xl font-semibold">Duyurular</h2>
  <ul class="mt-2 list-disc pl-5">
    <li>Bakım çalışması</li>
    <li>Yeni paketler</li>
  </ul>
  <a href="/duyurular" class="mt-4 inline-block text-sky-700 underline">Tümünü gör</a>
</article>

v4.3.5 ile derlenen CSS (theme katmanında --text-xl: 1.25rem, --font-weight-semibold: 600 ve --color-sky-700: oklch(50% 0.134 242.749) tanımlanır):

@layer utilities {
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .inline-block {
    display: inline-block;
  }
  .list-disc {
    list-style-type: disc;
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .text-sky-700 {
    color: var(--color-sky-700);
  }
  .underline {
    text-decoration-line: underline;
  }
}

Her sınıf, Preflight'ın kaldırdığı bir şeyi bilinçli olarak geri getiriyor: text-xl font-semibold başlığın boyutunu ve kalınlığını, list-disc madde işaretlerini, pl-5 işaretler için gereken sol boşluğu, text-sky-700 underline bağlantının rengini ve alt çizgisini, mt-2 ile mt-4 elemanlar arasındaki boşlukları veriyor. Sıfırlanmış padding nedeniyle liste işaretleri sol kenara yapışacağından pl-5 eklemek gerekiyor; alternatif olarak list-inside işaretleri içerik kutusunun içine alır. Bağlantıdaki inline-block, satır içi bir elemana dikey margin uygulanabilmesi için eklendi. Bu yaklaşım ilk başta uzun görünse de her görsel kararın HTML'de açıkça okunmasını sağlar; aynı kutu birçok yerde kullanılacaksa bir bileşene ya da şablon parçasına taşınır.

Preflight'ı genişletmek: @layer base

Başlıklara varsayılan boyut vermek ya da bağlantıları her yerde renkli göstermek istiyorsanız, Preflight'ı değiştirmek yerine kendi kurallarınızı @layer base içine eklersiniz. Belgedeki örneğe benzer bir giriş dosyasıyla derleme yaptık:

@import "tailwindcss" source(none);
@source inline("list-inside list-disc max-w-none inline");

@layer base {
  h1 {
    font-size: var(--text-2xl);
  }
  a {
    color: var(--color-blue-600);
    text-decoration-line: underline;
  }
}

v4.3.5 ile derlenen CSS'in ilgili kısımları:

/* (kısaltıldı) */
@layer theme {
  :root, :host {
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --text-2xl: 1.5rem;
  }
}
@layer utilities {
  .inline {
    display: inline;
  }
  .max-w-none {
    max-width: none;
  }
  .list-inside {
    list-style-position: inside;
  }
  .list-disc {
    list-style-type: disc;
  }
}
@layer base {
  h1 {
    font-size: var(--text-2xl);
  }
  a {
    color: var(--color-blue-600);
    text-decoration-line: underline;
  }
}

Üç şey dikkat çekiyor. Birincisi, kendi kurallarımız ikinci bir @layer base bloğu olarak dosyanın sonuna eklendi. Dosyada utilities bloğundan sonra gelmeleri, utility sınıflarını ezdikleri anlamına gelmez; katman sırası en başta theme, base, components, utilities olarak ilan edildiği için base katmanındaki her kural utilities katmanındakilere yenilir. Yani bir başlığa text-4xl verirseniz bu kural kazanır. İkincisi, base katmanı içinde bizim a kuralımız Preflight'ın a { color: inherit } kuralından sonra geldiği için onu ezer. Üçüncüsü, var(--text-2xl) ve var(--color-blue-600) kullanmamız bu değişkenlerin theme katmanına yazılmasını sağladı; tema değişkenleri yalnızca kullanıldıklarında üretilir.

Preflight'ı kapatmak

Tailwind'i zaten kendi temel stilleri olan bir projeye ekliyorsanız Preflight'ı kapatmak isteyebilirsiniz. Belgeye göre bunun yolu, @import "tailwindcss"; yerine parçaları tek tek içe aktarıp preflight.css satırını atlamaktır. Standalone CLI ile denedik:

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities) source(none);
@source inline("p-4 list-disc");

v4.3.5 ile derlenen CSS (kısaltma yok, dosyanın tamamı):

/*! tailwindcss v4.3.5 | MIT License | https://tailwindcss.com */
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --spacing: 0.25rem;
  }
}
@layer utilities {
  .list-disc {
    list-style-type: disc;
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
}

Çıktıda @layer base bloğu hiç yok; Preflight tamamen devre dışı. Dosya da birkaç satıra indi. Bu örnekte source(none) seçeneğinin utilities.css satırına yazıldığına dikkat edin. Belge, parçaları ayrı içe aktardığınızda seçeneklerin etkiledikleri dosyaya yazılması gerektiğini bir tabloyla açıklar:

Preflight'ı kapattığınızda bu yazıda anlatılan sıfırlamalar da ortadan kalkar: paragraflar ve başlıklar tarayıcı marginleri ve boyutlarıyla gelir, listeler madde işaretlerini geri alır, resimler satır içi kalır, box-sizing tarayıcı varsayılanına döner. Projenin kendi temel stilleri bu boşlukları doldurmuyorsa beklenmedik görünümlerle karşılaşabilirsiniz.

Sık yapılan hatalar

• Başlıkların neden küçük olduğunu aramak: Preflight başlık boyutlarını miras yapar; boyutu sınıfla ya da @layer base ile verin.
• Sade listelerde role="list" unutmak: Resmî belgeye göre VoiceOver stilsiz listeleri liste olarak duyurmaz.
• Temel stilleri katmansız yazmak: CSS katman kurallarına göre katman dışındaki normal bildirimler katmanlı kuralların üzerine yazar; utility sınıflarınızın çalışmamasının bir nedeni bu olabilir. Temel stilleri @layer base içine yazın.
• hidden özelliğini sınıfla ezmeye çalışmak: Kural !important'tır; özelliği kaldırın.
• Preflight'ı kapatıp boşluk sıfırlamasını beklemek: Preflight olmadan margin ve padding sıfırlanmaz; elemanlar tarayıcının varsayılan boşluklarıyla gelir ve boşluk sınıflarınız bunlarla birlikte hesaplanır.

Sık Sorulan Sorular

Preflight'ı yalnızca bir bölümde kapatabilir miyim?

Preflight bütün sayfaya uygulanır. Belirli bir alanda bir sıfırlamayı geri almak için, belgedeki harita örneğinde olduğu gibi, o alanın seçicisiyle kendi @layer base kuralınızı yazarsınız.

Preflight benim sınıflarımı ezer mi?

Hayır. Preflight base katmanında, utility sınıfları utilities katmanında durur ve katman sırası en başta ilan edildiği için utility sınıfları her zaman kazanır. Bu yazıdaki uygulamalı örnekte list-disc, Preflight'ın list-style: none kuralına rağmen madde işaretlerini geri getirdi. İstisna, !important ile yazılmış hidden özelliği kuralıdır.

Preflight dosyası ne kadar büyük?

v4.3.5 ile üretilen base katmanı bu serideki derlemelerde yaklaşık 150 satır tuttu. Küçültülmüş çıktıda bu daha da azalır; boyut karşılaştırması standalone CLI yazısında var.

Preflight ile normalize.css aynı şey mi?

Belgeye göre Preflight modern-normalize üzerine kuruludur, ancak margin sıfırlaması, başlık ve liste stillerinin kaldırılması gibi kendine özgü kararlar da ekler.

Kendi temel stillerimi nerede tutmalıyım?

Ana CSS dosyanızda @import "tailwindcss"; satırından sonra, @layer base bloğu içinde. Tema değişkenlerini (var(--text-2xl) gibi) kullanmak, değerlerin tasarım sisteminizle uyumlu kalmasını sağlar.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Tailwind CSS öğrenme rehberi · Tailwind katmanları · Border ve rounded · Erişilebilirlik · CSS @layer