Tailwind CSS'te bir öğeye dış gölge vermek için shadow-2xs, shadow-xs, shadow-sm, shadow-md, shadow-lg, shadow-xl ve shadow-2xl sınıflarını, iç gölge için inset-shadow-* sınıflarını, düz bir halka için de ring ve ring-2 gibi sınıfları kullanırsınız. Gölgenin rengini shadow-cyan-500/50, halkanın rengini ring-blue-500 gibi sınıflarla ayarlarsınız. Bunların hepsi aynı CSS özelliğine, box-shadow özelliğine yazar ama birbirini ezmez; Tailwind onları değişkenler aracılığıyla tek bir değerde birleştirir.

Bu yazıda gölge ölçeğini, gölge rengini ve opaklığını, iç gölgeleri, ring ve ring-offset sınıflarını, bunların outline ile farkını ve erişilebilir bir odak halkasının nasıl yazılacağını anlatıyoruz. Gösterilen tüm CSS, Tailwind CSS v4.3.5 standalone CLI ile derlendi. Kenarlıklar için border ve rounded yazısına, serinin genel haritası için Tailwind öğrenme rehberine bakabilirsiniz.

Gölge ölçeği ve değerleri

Gölge ölçeği ve değerleri: shadow-2xs, shadow-xs, shadow-sm, shadow-md

Her shadow-* sınıfı değerini --shadow-* tema değişkeninden alır. v4.3.5 tema dosyasındaki değerler şöyledir; çoğu boyut iki katmanlı bir gölgedir ve siyahın düşük opaklığıyla çizilir.

SınıfTema değeri
shadow-2xs0 1px rgb(0 0 0 / 0.05)
shadow-xs0 1px 2px 0 rgb(0 0 0 / 0.05)
shadow-sm0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)
shadow-md0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
shadow-lg0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)
shadow-xl0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)
shadow-2xl0 25px 50px -12px rgb(0 0 0 / 0.25)
shadow-none0 0 #0000

Ek almayan shadow sınıfı da derlenir. Aşağıdaki derlemede görüldüğü gibi shadow ve shadow-sm birebir aynı CSS'i üretir.

html
<div class="shadow"></div>
<div class="shadow-sm"></div>
<div class="shadow-md"></div>

v4.3.5 ile derlenen CSS:

css
@layer utilities {
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
}

Resmî yükseltme rehberi bunun nedenini açıklar: v4'te gölge, köşe ve bulanıklık ölçekleri her sınıfın adlandırılmış bir değeri olacak şekilde kaydırıldı. v3'teki shadow-sm görünümü artık shadow-xs, v3'teki shadow görünümü artık shadow-sm adını taşır. Ek almayan adlar geriye uyumluluk için çalışır, ancak v3 projesinden taşıdığınız shadow-sm sınıfları bir kademe daha belirgin görünür. Ad değişikliklerinin tamamı Tailwind v4 yenilikleri yazısında listeleniyor.

box-shadow neden tek değişkende birleşiyor?

Yukarıdaki çıktıda her gölge sınıfının aynı box-shadow satırını yazdığını gördünüz. Bu satır beş değişkeni sırayla birleştirir: iç gölge (--tw-inset-shadow), iç halka (--tw-inset-ring-shadow), halka boşluğu (--tw-ring-offset-shadow), halka (--tw-ring-shadow) ve dış gölge (--tw-shadow). Her sınıf yalnızca kendi değişkenini değiştirir. Bu değişkenler @property ile initial-value: 0 0 #0000 olarak, yani görünmez bir gölge olarak tanımlanır. Sonuçta shadow-md ring-2 inset-shadow-sm gibi bir birleşim üç efekti birden gösterir; sonra gelen sınıf öncekini silmez.

Bu tasarımın bir sonucu da şudur: kendi CSS'inizde aynı öğeye doğrudan box-shadow yazarsanız Tailwind'in birleştirdiği tüm katmanları tek seferde ezersiniz. Gölgeyi özelleştirmek istediğinizde @theme ya da keyfi değer kullanmak bu birleşimi korur.

Gölge rengi ve opaklık modifier'ı

Gölgeyi renklendirmek için gölge boyutu sınıfına ek olarak bir renk sınıfı yazarsınız. Renkli butonlarda gölgeyi butonla aynı tonda vermek, siyah gölgeye göre daha yumuşak bir görünüm sağlar.

html
<button class="bg-cyan-500 shadow-lg shadow-cyan-500/50">Abone ol</button>

v4.3.5 ile derlenen CSS:

css
@layer utilities {
  .bg-cyan-500 {
    background-color: var(--color-cyan-500);
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-cyan-500\/50 {
    --tw-shadow-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-cyan-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
}

shadow-lg içindeki var(--tw-shadow-color, rgb(0 0 0 / 0.1)) ifadesi, renk sınıfı yoksa siyahın yüzde 10'unu kullanır. shadow-cyan-500/50 bu değişkeni doldurduğunda gölgenin her iki katmanı da camgöbeği rengini alır. --color-cyan-500 değeri tema bölümünde oklch(71.5% 0.143 215.221) olarak yer alır. Belgeye göre renkli gölgeler varsayılan olarak tam opaktır; /50 gibi bir modifier ile azaltılır.

Opaklık modifier'ını doğrudan boyut sınıfına da ekleyebilirsiniz. Bu durumda renk değişmez, yalnızca varsayılan siyah gölgenin yoğunluğu ayarlanır.

html
<div class="shadow-xl/20"></div>

v4.3.5 ile derlenen CSS:

css
@layer utilities {
  .shadow-xl\/20 {
    --tw-shadow-alpha: 20%;
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, oklab(from rgb(0 0 0 / 0.1) l a b / 20%)), 0 8px 10px -6px var(--tw-shadow-color, oklab(from rgb(0 0 0 / 0.1) l a b / 20%));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
}

Burada /20 değeri, temel rengin kendi opaklığıyla çarpılmaz, onun yerine geçer: oklab(from ... / 20%) göreli renk sözdizimi gölge renginin alfa değerini yüzde 20 yapar. Resmî belge, varsayılan gölge opaklıklarının düşük (yüzde 25 ya da altı) olduğunu, daha belirgin bir gölge için opaklığı artırabileceğinizi belirtir. Renk modifier'ının genel işleyişi renk opaklığı yazısında anlatılıyor.

İç gölge: inset-shadow-*

inset-shadow-2xs, inset-shadow-xs ve inset-shadow-sm sınıfları öğenin içine doğru düşen gölgeler üretir; giriş alanlarında basılmış ya da gömülü bir görünüm için kullanılır. Rengi inset-shadow-indigo-500 gibi sınıflarla değiştirilir.

html
<input class="inset-shadow-sm inset-shadow-indigo-500/50">

v4.3.5 ile derlenen CSS:

css
@layer utilities {
  .inset-shadow-sm {
    --tw-inset-shadow: inset 0 2px 4px var(--tw-inset-shadow-color, rgb(0 0 0 / 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .inset-shadow-indigo-500\/50 {
    --tw-inset-shadow-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-indigo-500) 50%, transparent) var(--tw-inset-shadow-alpha), transparent);
    }
  }
}

İç gölgeler ayrı bir değişkene (--tw-inset-shadow) yazdığı için aynı öğede bir dış gölgeyle birlikte kullanılabilir. Belge, varsayılan iç gölge opaklığının yüzde 5 olduğunu, daha görünür bir etki için inset-shadow-sm/50 gibi bir opaklık modifier'ı eklenebileceğini söyler.

Ring: kutu gölgesiyle çizilen halka

ring sınıfları bulanıklığı olmayan, yayılma değeri verilen bir box-shadow ile öğenin çevresine düz bir halka çizer. Kenarlıktan farkı, yerleşimi etkilememesidir: halka kutunun dışına çizilir, öğenin boyutunu ya da komşularının yerini değiştirmez. ring-offset-* sınıfları halka ile öğe arasına renkli bir boşluk ekler.

html
<button class="ring-2 ring-blue-500 ring-offset-2 ring-offset-white">Kaydet</button>

v4.3.5 ile derlenen CSS:

css
@layer utilities {
  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-blue-500 {
    --tw-ring-color: var(--color-blue-500);
  }
  .ring-offset-2 {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }
  .ring-offset-white {
    --tw-ring-offset-color: var(--color-white);
  }
}

Mekanizma şöyle işler: ring-offset-2 2px'lik, ring-offset-white ile beyaz renkte bir iç halka çizer. ring-2 ise genişliğini calc(2px + var(--tw-ring-offset-width)) olarak hesaplar; yani boşluğun üstüne 2px daha ekleyerek toplam 4px'lik bir halka çizer ve bunun dış 2px'i mavi görünür. --tw-ring-offset-color değişkeni @property ile #fff başlangıç değeri aldığı için açık zeminde ring-offset-white yazmasanız da sonuç aynıdır; koyu zeminde ise boşluğun zeminle aynı renkte olması için ring-offset-gray-900 gibi bir renk vermelisiniz. Resmî box-shadow sayfası ring ve inset-ring sınıflarını anlatır; ring-offset sınıflarının çıktısı burada doğrudan CLI derlemesinden alınmıştır.

İç halka: inset-ring

inset-ring ve inset-ring-2 gibi sınıflar halkayı kutunun içine çizer. Kart ya da görsel kenarlarında, kenarlık eklemeden çok ince bir sınır çizgisi elde etmek için kullanışlıdır.

html
<div class="inset-ring inset-ring-gray-900/10"></div>

v4.3.5 ile derlenen CSS:

css
@layer utilities {
  .inset-ring {
    --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .inset-ring-gray-900\/10 {
    --tw-inset-ring-color: color-mix(in srgb, oklch(21% 0.034 264.665) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-inset-ring-color: color-mix(in oklab, var(--color-gray-900) 10%, transparent);
    }
  }
}

Ring ile outline arasındaki fark

Ring ile outline arasındaki fark: CSS özelliği, Yerleşimi etkiler mi, Gölgelerle birleşir mi, Boşluk sınıfı

Odak göstergesi çizmenin ikinci yolu outline sınıflarıdır. Outline, box-shadow değil CSS outline özelliğidir; outline-2 genişliği, outline-sky-500 rengi, outline-offset-2 ise öğeyle arasındaki boşluğu belirler. Belgeye göre ek almayan outline sınıfı 1px genişlik verir ve outline-<sayı> sınıfları stili kendiliğinden solid yapar.

html
<div class="outline outline-none outline-hidden"></div>

v4.3.5 ile derlenen CSS:

css
@layer utilities {
  .outline-hidden {
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
}

Bu çıktı iki önemli farkı gösterir. outline-none outline'ı tamamen kaldırır. outline-hidden ise normal modda aynı şeyi yapar ama forced-colors: active durumunda, yani kullanıcı zorunlu renk modunu açtığında, saydam bir 2px outline bırakır. Yükseltme rehberine göre bu görünmez çizgi, erişilebilirlik amacıyla zorunlu renk modunda yine de görünür hâle gelir. Yükseltme rehberi, v3'teki outline-none sınıfının aslında bu ikinci davranışa sahip olduğunu ve v4'te outline-hidden adını aldığını açıklar. Varsayılan odak çizgisini kaldırıp yerine ring koyacaksanız outline-hidden daha güvenli seçimdir.

Özellikringoutline
CSS özelliğibox-shadowoutline
Yerleşimi etkiler miHayırHayır
Gölgelerle birleşir miEvet, aynı box-shadow içindeAyrı özellik
Boşluk sınıfıring-offset-*outline-offset-*
Ek almayan sınıfın genişliği (v4)1px1px
Stil seçeneğiYok, düz halkaoutline-dashed gibi stiller

Erişilebilir odak halkası yazmak

Klavyeyle gezinen kullanıcılar için odak göstergesi zorunludur. En sık iki kalıp şunlardır: focus-visible: ile yalnızca klavye odağında görünen bir outline, ya da tarayıcı outline'ını focus:outline-hidden ile gizleyip yerine ring koymak.

html
<button class="focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500">Gönder</button>
<input class="focus:outline-hidden focus:ring-2 focus:ring-sky-500">

v4.3.5 ile derlenen CSS:

css
@layer utilities {
  .focus\:ring-2:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .focus\:ring-sky-500:focus {
    --tw-ring-color: var(--color-sky-500);
  }
  .focus\:outline-hidden:focus {
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
  }
  .focus-visible\:outline-2:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }
  .focus-visible\:outline-offset-2:focus-visible {
    outline-offset: 2px;
  }
  .focus-visible\:outline-sky-500:focus-visible {
    outline-color: var(--color-sky-500);
  }
}

Resmî belge focus-visible varyantını, öğe klavyeyle odaklandığında stil vermek için önerir; böylece halka fareyle tıklamada değil klavyeyle gezinmede öne çıkar. Input örneğinde ise focus:outline-hidden varsayılan çizgiyi kaldırırken ring görsel odak göstergesini üstlenir. Odak ve erişilebilirlik varyantlarının tamamı erişilebilirlik yazısında, durum varyantları ise hover ve focus yazısında anlatılıyor.

Kendi gölgenizi tanımlamak

Ölçeğe yeni bir gölge eklemek için @theme içinde --shadow-* değişkeni tanımlarsınız. Tek seferlik bir değer için köşeli parantez de yeterlidir; boşluklar alt çizgiyle yazılır.

css
@import "tailwindcss";

@theme {
  --shadow-3xl: 0 35px 35px rgba(0, 0, 0, 0.25);
}
html
<div class="shadow-3xl shadow-[0_35px_35px_rgba(0,0,0,0.25)]"></div>

v4.3.5 ile derlenen CSS:

css
@layer utilities {
  .shadow-3xl {
    --tw-shadow: 0 35px 35px var(--tw-shadow-color, rgba(0, 0, 0, 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_35px_35px_rgba\(0\,0\,0\,0\.25\)\] {
    --tw-shadow: 0 35px 35px var(--tw-shadow-color, rgba(0,0,0,0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
}

Tailwind, tanımladığınız değerin içindeki rengi var(--tw-shadow-color, ...) ile sarar. Bu sayede kendi gölgeniz de shadow-indigo-500/40 gibi renk sınıflarıyla renklendirilebilir. İç gölgeler için aynı yöntem --inset-shadow-* değişkenleriyle çalışır. Tema değişkenlerinin ad alanları @theme yazısında ayrıntılı olarak anlatılıyor.

Uygulamalı örnek: üzerine gelince yükselen kart

Bir panel kartında hafif bir gölge, kenarlık yerine çok saydam bir ring ve fareyle üzerine gelindiğinde büyüyen bir gölge birlikte kullanılabilir. ring-1 ring-gray-900/5, kenarlık kadar yer kaplamayan ince bir çerçeve çizer.

html
<div class="rounded-xl bg-white p-6 shadow-md ring-1 ring-gray-900/5 transition-shadow hover:shadow-lg">
  <h3 class="font-semibold">Sunucu durumu</h3>
</div>

v4.3.5 ile derlenen CSS (yalnızca gölgeyle ilgili kurallar):

css
@layer utilities {
  /* (kısaltıldı) */
  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-gray-900\/5 {
    --tw-ring-color: color-mix(in srgb, oklch(21% 0.034 264.665) 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-gray-900) 5%, transparent);
    }
  }
  .transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  @media (hover: hover) {
    .hover\:shadow-lg:hover {
      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
}

hover:shadow-lg yalnızca --tw-shadow değişkenini değiştirir; ring değişkeni olduğu gibi kaldığı için ince çerçeve üzerine gelindiğinde de görünmeye devam eder. transition-shadow, geçişi yalnızca box-shadow özelliğiyle sınırlar ve 150ms varsayılan süre kullanır. Geçiş sınıflarının ayrıntıları transition, duration ve ease yazısında anlatılıyor.

Sık yapılan hatalar

Sık yapılan hatalar: v3'ten gelen shadow-sm sınıfının koyu görünmesi, Ring'in görünmemesi, outline-none ile odak göstergesini tamamen silmek, Gölgeyi metne vermeye çalışmak
  • v3'ten gelen shadow-sm sınıfının koyu görünmesi: v4'te shadow-sm eski shadow değerini taşır; eski hafif görünüm için shadow-xs kullanın.
  • Ring'in görünmemesi: Renk vermediğiniz ring currentColor olur ve 1px'tir. Beyaz metinli bir butonda beyaz zemine çizilen bir halka fark edilmeyebilir; bir renk ve genişlik sınıfı ekleyin.
  • outline-none ile odak göstergesini tamamen silmek: Varsayılan odak çizgisini kaldırıp yerine hiçbir şey koymamak klavye kullanıcılarını yönsüz bırakır. Yerine ring ya da focus-visible:outline-* ekleyin.
  • Gölgeyi metne vermeye çalışmak: shadow-* kutunun dikdörtgenine gölge düşürür. Şeffaf PNG ya da SVG gibi düzensiz şekillere gölge için drop-shadow-* filtresini, metne gölge için text-shadow-* sınıflarını kullanın. Drop shadow, blur ve filtreler yazısında anlatılıyor.
  • Kendi CSS'inizde box-shadow yazmak: Aynı öğedeki tüm Tailwind gölge ve halka katmanlarını tek seferde ezer. Gölgeyi tema değişkeniyle ya da keyfi değerle tanımlayın.

Sık Sorulan Sorular

Tailwind'de shadow ile shadow-sm aynı mı?

v4.3.5 derlemesinde evet: ikisi de 0 1px 3px 0 ve 0 1px 2px -1px katmanlarından oluşan aynı gölgeyi üretir. Ek almayan ad geriye uyumluluk için vardır; yeni kodda adı olan sürümü kullanmak niyetinizi açık eder.

Ring ile border arasında hangisini seçmeliyim?

Kalıcı ve öğenin kutusunun parçası olan bir çizgi için border, durumla birlikte gelip giden ya da yerleşimi kaydırmaması gereken bir halka için ring kullanın. Ring kutu gölgesi olduğu için kenarlığın dışına çizilir ve gölgelerle birleşebilir.

Koyu temada ring-offset neden beyaz görünüyor?

--tw-ring-offset-color değişkeninin başlangıç değeri #fff olduğu için boşluk, renk vermediğiniz sürece beyaz çizilir. Koyu temada zeminle aynı tonda bir sınıf ekleyin, örneğin dark:ring-offset-gray-900. Karanlık mod varyantı dark mode yazısında anlatılıyor.

Gölgeye renk verdiğimde opaklık neden tam?

Belgeye göre renkli gölgeler varsayılan olarak yüzde 100 opaktır. Daha yumuşak bir görünüm için renk sınıfına /50 gibi bir opaklık değeri ekleyin: shadow-indigo-500/50.

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 öğrenme rehberi · Border ve rounded · Blur ve filtreler · Erişilebilirlik ve focus-visible · Transition ve duration · Tailwind v4 yenilikleri