Tailwind CSS'te gradyan arka plan için bir yön ya da şekil sınıfı ile renk durakları sınıflarını birlikte yazarsınız: bg-linear-to-r from-cyan-500 to-blue-500 soldan sağa camgöbeğinden maviye geçen doğrusal bir gradyan üretir. Ortaya üçüncü bir renk eklemek için via-*, açıyla yön vermek için bg-linear-45, dairesel ya da konik gradyan için bg-radial ve bg-conic sınıfları vardır. v4'teki adı bg-linear-* olan bu sınıfların eski adı bg-gradient-to-* idi.
Bu yazıda doğrusal, dairesel ve konik gradyanları, durak konumlarını, renk geçişinin hangi renk uzayında hesaplanacağını seçen interpolasyon modifier'ını, gradyan metni ve durumlara göre gradyan değiştirmeyi anlatıyoruz. Tüm CSS çıktıları Tailwind CSS v4.3.5 standalone CLI ile derlendi; tekrar eden uzun --tw-gradient-stops satırı her renk sınıfında aynıdır. Serinin diğer konuları için Tailwind öğrenme rehberine bakabilirsiniz.
İlk gradyan: yön ve iki renk
Doğrusal gradyanın sekiz hazır yönü vardır: bg-linear-to-t (yukarı), -tr, -r (sağa), -br, -b (aşağı), -bl, -l ve -tl. Renkler from-* (başlangıç) ve to-* (bitiş) sınıflarıyla verilir.
<div class="h-14 bg-linear-to-r from-cyan-500 to-blue-500"></div>v4.3.5 ile derlenen CSS:
@layer utilities {
.h-14 {
height: calc(var(--spacing) * 14);
}
.bg-linear-to-r {
--tw-gradient-position: to right;
@supports (background-image: linear-gradient(in lab, red, red)) {
--tw-gradient-position: to right in oklab;
}
background-image: linear-gradient(var(--tw-gradient-stops));
}
.from-cyan-500 {
--tw-gradient-from: var(--color-cyan-500);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-blue-500 {
--tw-gradient-to: var(--color-blue-500);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
}Bu çıktı gradyanın üç parçadan kurulduğunu gösterir. Yön sınıfı yalnızca --tw-gradient-position değişkenini ayarlar ve background-image özelliğine linear-gradient(var(--tw-gradient-stops)) yazar. Renk sınıfları --tw-gradient-from ve --tw-gradient-to değişkenlerini doldurur ve durak listesini (--tw-gradient-stops) yeniden kurar. Liste sırasıyla konumu, başlangıç rengini ve konumunu, bitiş rengini ve konumunu içerir. Tema bölümünde --color-cyan-500: oklch(71.5% 0.143 215.221) ve --color-blue-500: oklch(62.3% 0.214 259.815) değerleri yer alır.
@supports bloğu da önemlidir: tarayıcı gradyanlarda renk uzayı seçimini destekliyorsa konum to right in oklab olur. Resmî belgeye göre gradyanlar varsayılan olarak oklab renk uzayında hesaplanır; bunu aşağıda anlatılan interpolasyon modifier'ıyla değiştirebilirsiniz. Renk uzaylarının kendisi CSS renk değerleri yazısında anlatılıyor.
Açıyla yön vermek: bg-linear-<açı>
Sekiz hazır yön yetmediğinde sayıyı derece olarak yazarsınız. Başına eksi koymak açıyı ters çevirir.
<div class="bg-linear-45"></div>
<div class="-bg-linear-45"></div>v4.3.5 ile derlenen CSS:
@layer utilities {
.-bg-linear-45 {
--tw-gradient-position: calc(45deg * -1);
@supports (background-image: linear-gradient(in lab, red, red)) {
--tw-gradient-position: calc(45deg * -1) in oklab;
}
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-linear-45 {
--tw-gradient-position: 45deg;
@supports (background-image: linear-gradient(in lab, red, red)) {
--tw-gradient-position: 45deg in oklab;
}
background-image: linear-gradient(var(--tw-gradient-stops));
}
}Sayı doğrudan deg birimine çevrilir; tema ölçeği yoktur, bu yüzden bg-linear-65 ya da bg-linear-160 da aynı şekilde çalışır. Eksi işaretli sürüm değeri calc(45deg * -1) ile tersine çevirir.
Üçüncü renk ve durak konumları
via-* sınıfı gradyanın ortasına bir renk ekler. Rengin nerede başlayıp biteceğini from-10%, via-30%, to-90% gibi yüzde sınıflarıyla belirlersiniz.
<div class="bg-linear-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90%"></div>v4.3.5 ile derlenen CSS:
@layer utilities {
.bg-linear-to-r {
--tw-gradient-position: to right;
@supports (background-image: linear-gradient(in lab, red, red)) {
--tw-gradient-position: to right in oklab;
}
background-image: linear-gradient(var(--tw-gradient-stops));
}
.from-indigo-500 {
--tw-gradient-from: var(--color-indigo-500);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-10\% {
--tw-gradient-from-position: 10%;
}
.via-sky-500 {
--tw-gradient-via: var(--color-sky-500);
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);
}
.via-30\% {
--tw-gradient-via-position: 30%;
}
.to-emerald-500 {
--tw-gradient-to: var(--color-emerald-500);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-90\% {
--tw-gradient-to-position: 90%;
}
}via-sky-500 iki iş yapar: kendi rengini ayarlar ve --tw-gradient-via-stops adında, ortadaki durağı da içeren yeni bir liste kurup --tw-gradient-stops değişkenini bu listeye bağlar. from-* ve to-* sınıflarındaki liste ise var(--tw-gradient-via-stops, ...) ile başlar: via listesi tanımlıysa onu, değilse iki duraklı listeyi kullanır. Bu sayede sınıfları HTML'de hangi sırayla yazdığınız sonucu değiştirmez.
Konum sınıfları yalnızca konum değişkenlerini ayarlar. Konum vermediğinizde @property başlangıç değerleri geçerlidir: başlangıç yüzde 0, orta durak yüzde 50, bitiş yüzde 100. Örnekteki gradyanda soldaki yüzde 10'luk bölüm düz indigo, sağdaki yüzde 10'luk bölüm düz zümrüt yeşili kalır.
Dairesel gradyan: bg-radial
bg-radial merkezden dışa doğru bir gradyan çizer. Merkezin yerini değiştirmek için köşeli parantezle bir konum yazarsınız; boşluklar alt çizgiyle gösterilir.
<div class="size-18 rounded-full bg-radial from-pink-400 from-40% to-fuchsia-700"></div>
<div class="bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%"></div>v4.3.5 ile derlenen CSS (gradyanla ilgili kurallar):
@layer utilities {
/* (kısaltıldı) */
.bg-radial {
--tw-gradient-position: in oklab;
background-image: radial-gradient(var(--tw-gradient-stops));
}
.bg-radial-\[at_25\%_25\%\] {
--tw-gradient-position: at 25% 25%;
background-image: radial-gradient(var(--tw-gradient-stops,at 25% 25%));
}
.from-pink-400 {
--tw-gradient-from: var(--color-pink-400);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-40\% {
--tw-gradient-from-position: 40%;
}
.to-zinc-900 {
--tw-gradient-to: var(--color-zinc-900);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-75\% {
--tw-gradient-to-position: 75%;
}
}bg-radial-[at_25%_25%] gradyanın merkezini yatayda ve dikeyde yüzde 25 konumuna, yani sol üst çeyreğe taşır. İlk örnekte from-40%, merkezden yarıçapın yüzde 40'ına kadar düz pembe bırakır ve geçişi oradan başlatır.
Konik gradyan: bg-conic
Konik gradyan renkleri bir merkez nokta çevresinde döndürür. bg-conic-180 gibi bir sayı, dönüşün başlangıç açısını belirler.
<div class="size-24 rounded-full bg-conic-180 from-indigo-600 via-indigo-50 to-indigo-600"></div>v4.3.5 ile derlenen CSS (gradyanla ilgili kurallar):
@layer utilities {
/* (kısaltıldı) */
.bg-conic-180 {
--tw-gradient-position: from 180deg in oklab;
background-image: conic-gradient(var(--tw-gradient-stops));
}
.from-indigo-600 {
--tw-gradient-from: var(--color-indigo-600);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.via-indigo-50 {
--tw-gradient-via: var(--color-indigo-50);
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);
}
.to-indigo-600 {
--tw-gradient-to: var(--color-indigo-600);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
}Başlangıç ve bitiş rengi aynı olduğunda dönüş kesintisiz kapanır; örnekte koyu indigo, 180 dereceden başlayıp ortada çok açık indigoya geçer ve tekrar koyu indigoya döner.
İnterpolasyon modifier'ı: hangi renk uzayında geçiş?
Gradyan sınıfına eğik çizgiyle bir renk uzayı ekleyerek geçişin nasıl hesaplanacağını seçebilirsiniz. Belge şu modifier'ları listeler: /srgb, /hsl, /oklab, /oklch, /longer, /shorter, /increasing ve /decreasing.
<div class="bg-linear-to-r/srgb from-indigo-500 to-teal-400"></div>
<div class="bg-linear-to-r/longer from-indigo-500 to-teal-400"></div>v4.3.5 ile derlenen CSS (yön sınıfları):
@layer utilities {
/* (kısaltıldı) */
.bg-linear-to-r\/longer {
--tw-gradient-position: to right;
@supports (background-image: linear-gradient(in lab, red, red)) {
--tw-gradient-position: to right in oklch longer hue;
}
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-linear-to-r\/srgb {
--tw-gradient-position: to right;
@supports (background-image: linear-gradient(in lab, red, red)) {
--tw-gradient-position: to right in srgb;
}
background-image: linear-gradient(var(--tw-gradient-stops));
}
}Çıktıda görüldüğü gibi /srgb konuma in srgb, /longer ise in oklch longer hue ekler. Ton açısı kullanan renk uzaylarında (hsl, oklch) iki renk arasında ton tekerleğinin iki yolu vardır: /shorter kısa yolu, /longer uzun yolu, /increasing ve /decreasing ise ton açısının artan ya da azalan yönünü seçer. Uzun yol, kısa yolda geçilmeyen tonları da gradyana katar. Destek kontrolü @supports içinde yapıldığı için bu özelliği tanımayan bir tarayıcı yalnızca to right değerini görür ve kendi varsayılanıyla çizer.
Gradyan metin: bg-clip-text
Metne gradyan rengi vermek için arka plana gradyan uygulayıp bg-clip-text ile arka planı yazının şekline kırparsınız; metin rengini de text-transparent ile saydam yaparsınız ki arka plan görünsün.
<h1 class="bg-linear-to-r from-pink-500 to-violet-500 bg-clip-text text-5xl font-extrabold text-transparent">
Merhaba dünya
</h1>v4.3.5 ile derlenen CSS (gradyan ve kırpma kuralları):
@layer utilities {
/* (kısaltıldı) */
.bg-linear-to-r {
--tw-gradient-position: to right;
@supports (background-image: linear-gradient(in lab, red, red)) {
--tw-gradient-position: to right in oklab;
}
background-image: linear-gradient(var(--tw-gradient-stops));
}
.from-pink-500 {
--tw-gradient-from: var(--color-pink-500);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-violet-500 {
--tw-gradient-to: var(--color-violet-500);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.bg-clip-text {
background-clip: text;
}
.text-transparent {
color: transparent;
}
}Üç sınıftan biri eksik olursa efekt bozulur: bg-clip-text olmadan başlık gradyanlı bir dikdörtgenin içinde saydam metin olarak görünür, text-transparent olmadan normal yazı rengi gradyanın üstünü örter. Örnekteki yazı boyutu ve kalınlık sınıfları font-size ve font-weight yazısında anlatılıyor.
Durumlar ve karanlık mod: gradyanın bir parçasını değiştirmek
Gradyanın yalnızca bir rengini bir varyantla değiştirmek mümkündür ve diğer duraklar korunur. Resmî yükseltme rehberi, v3'te bir durağı varyantla değiştirmenin tüm gradyanı sıfırladığını, v4'te ise değerlerin korunduğunu belirtir. Üç duraklı bir gradyanı belirli bir durumda iki duraklıya indirmek için via-none kullanılır.
<div class="bg-linear-to-r from-red-500 via-orange-400 to-yellow-400 dark:via-none dark:from-blue-500 dark:to-teal-400"></div>v4.3.5 ile derlenen CSS (karanlık mod kısmı):
@layer utilities {
/* (kısaltıldı) */
@media (prefers-color-scheme: dark) {
.dark\:via-none {
--tw-gradient-via-stops: initial;
}
.dark\:from-blue-500 {
--tw-gradient-from: var(--color-blue-500);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.dark\:to-teal-400 {
--tw-gradient-to: var(--color-teal-400);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
}
}dark:via-none, via listesini initial yaparak devre dışı bırakır; böylece from ve to sınıflarındaki var(--tw-gradient-via-stops, ...) ifadesi yedek değere, yani iki duraklı listeye düşer. Varsayılan dark: varyantı prefers-color-scheme medya sorgusuna bağlıdır; sınıfla değiştirilen karanlık mod dark mode yazısında anlatılıyor.
Uygulamalı örnek: üzerine gelince renkleri yer değiştiren buton
transition-colors sınıfının geçiş listesinde --tw-gradient-from, --tw-gradient-via ve --tw-gradient-to değişkenleri de bulunur. Bu değişkenler @property ile <color> türünde tanımlandığı için tarayıcı onları renk olarak ara değerlerle geçirebilir.
<a class="rounded-lg bg-linear-to-r from-sky-500 to-indigo-500 px-4 py-2 text-white transition-colors duration-300 hover:from-indigo-500 hover:to-sky-500">Hemen başlayın</a>v4.3.5 ile derlenen CSS (geçiş ve hover kuralları):
@layer utilities {
/* (kısaltıldı) */
.transition-colors {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.duration-300 {
--tw-duration: 300ms;
transition-duration: 300ms;
}
@media (hover: hover) {
.hover\:from-indigo-500:hover {
--tw-gradient-from: var(--color-indigo-500);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.hover\:to-sky-500:hover {
--tw-gradient-to: var(--color-sky-500);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
}
}Fareyle üzerine gelindiğinde iki renk 300ms içinde yer değiştirir. hover: varyantı @media (hover: hover) içinde olduğu için üzerine gelme yeteneği olmayan cihazlarda bu kural uygulanmaz; bağlantı yine çalışır, yalnızca renk değişimi olmaz. Geçiş sınıflarının ayrıntıları transition yazısında yer alıyor.
Görselin üstüne karartma gradyanı
Bir kapak görselinin üstüne yazı yerleştirirken yazının okunması için görselin alt kısmını koyulaştırmak sık kullanılan bir yöntemdir. Bunun için görselin üstüne mutlak konumlu bir katman koyar ve bu katmana tek renkli, opaklık modifier'lı bir gradyan verirsiniz.
<div class="relative">
<img src="kapak.jpg" alt="">
<div class="absolute inset-0 bg-linear-to-t from-black/70"></div>
</div>v4.3.5 ile derlenen CSS:
@layer utilities {
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.inset-0 {
inset: 0px;
}
.bg-linear-to-t {
--tw-gradient-position: to top;
@supports (background-image: linear-gradient(in lab, red, red)) {
--tw-gradient-position: to top in oklab;
}
background-image: linear-gradient(var(--tw-gradient-stops));
}
.from-black\/70 {
--tw-gradient-from: color-mix(in srgb, #000 70%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-gradient-from: color-mix(in oklab, var(--color-black) 70%, transparent);
}
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
}bg-linear-to-t gradyanı alttan yukarıya çizer; başlangıç rengi yüzde 70 opak siyah olduğu için alt kenar koyu, üst kenar ise to-* verilmediğinden tamamen saydam olur. Opaklık modifier'ı renk duraklarında da color-mix() ile çalışır, yani via-white/20 ya da to-sky-500/0 gibi değerler de yazılabilir. inset-0 katmanı kapsayıcının dört kenarına yaslar; konumlandırma sınıfları position ve inset yazısında anlatılıyor. Karartma katmanının kendisi tıklamaları engellememeli ise ona pointer-events-none eklemeyi düşünün.
Keyfi gradyan ve görsel arka plan
Hazır sınıflarla ifade edilemeyen bir gradyanı köşeli parantez içinde yazabilirsiniz; virgüller korunur, boşluklar alt çizgiyle yazılır. Bir görseli arka plan yapmak için bg-[url(...)] kullanılır.
<div class="bg-linear-[25deg,red_5%,yellow_60%,lime_90%,teal]"></div>
<div class="bg-[url(/img/dag.jpg)]"></div>v4.3.5 ile derlenen CSS:
@layer utilities {
.bg-linear-\[25deg\,red_5\%\,yellow_60\%\,lime_90\%\,teal\] {
--tw-gradient-position: 25deg,red 5%,yellow 60%,lime 90%,teal;
background-image: linear-gradient(var(--tw-gradient-stops,25deg,red 5%,yellow 60%,lime 90%,teal));
}
.bg-\[url\(\/img\/dag\.jpg\)\] {
background-image: url(/img/dag.jpg);
}
}Keyfi gradyan, durak listesini yedek değer olarak var(--tw-gradient-stops, ...) içine koyar. Aynı öğeye bir from-* sınıfı eklerseniz Tailwind'in durak listesi tanımlanır ve köşeli parantezdeki renklerin yerini alır; bu yüzden keyfi gradyanı renk sınıflarıyla karıştırmayın. Köşeli parantez kuralları arbitrary values yazısında anlatılıyor.
Eski ad bg-gradient-to-* ve sık hatalar
Pek çok örnekte hâlâ bg-gradient-to-r yazıldığını görürsünüz. v4.3.5 bu adı derlemeye devam eder, ancak tailwindcss canonicalize bg-gradient-to-r bg-gradient-to-tl komutu bg-linear-to-r ve bg-linear-to-tl önerir. Yeni kodda kanonik adı kullanın; ad değişikliklerinin arka planı Tailwind v4 yenilikleri yazısında anlatılıyor.
tailwindcss canonicalize bg-gradient-to-r bg-gradient-to-tl
bg-linear-to-r
bg-linear-to-tl- Yön sınıfını unutmak: Yalnızca
from-*veto-*yazmak hiçbir şey göstermez; bu sınıflar değişken ayarlar,background-imageözelliğini yön ya da şekil sınıfı yazar. - bg-* renk sınıfıyla gradyanı karıştırmak:
bg-blue-500background-color,bg-linear-*isebackground-imageyazar. İkisi birlikte kullanılabilir; gradyan saydam bölgelerinde arka plan rengi görünür. - Dinamik renk adı birleştirmek:
from-{renk}-500gibi şablonla oluşturulan adlar kaynak taramasında bulunamaz ve CSS üretilmez. Ayrıntılar için @source ve class tarama yazısına bakın. - Varyantla gradyanı sıfırlamayı beklemek: v4'te
dark:from-*yalnızca başlangıç rengini değiştirir; via durağını kaldırmak için açıkçavia-noneyazmanız gerekir.
Sık Sorulan Sorular
Tailwind'de gradyan arka plan nasıl yapılır?
Bir yön sınıfı ve iki renk sınıfı yazın: bg-linear-to-r from-sky-500 to-indigo-500. Ortaya renk eklemek için via-*, konum vermek için from-20% gibi yüzde sınıflarını kullanın.
bg-gradient-to-r ile bg-linear-to-r farkı nedir?
v4.3.5'te ikisi de derlenir ve aynı yönde gradyan çizer; canonicalize komutu eski adı bg-linear-to-r olarak düzeltir. v4 belgeleri yalnızca bg-linear-* adını kullanır.
Gradyanın açısını nasıl değiştiririm?
bg-linear-45 gibi sayılı bir sınıf yazın; sayı derece olarak yorumlanır. Ters yön için başına eksi ekleyin: -bg-linear-45.
Gradyanın ara renklerini nasıl değiştiririm?
Geçişin hangi renk uzayında hesaplandığı ara tonları belirler. Tailwind varsayılan olarak oklab kullanır; farklı ara tonlar için /srgb, /oklch ya da /longer gibi bir interpolasyon modifier'ı deneyip sonuçları karşılaştırın.
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 · Renk paleti ve tonlar · Renk opaklığı · Dark mode · Transition ve duration · CSS renk değerleri