Színek és hátterek

Tailwind szín paletta, background, text color, gradientek, opacity, /50 szintaxis.

Színek és hátterek

A Tailwind szín paletta

A Tailwind beépített szín palettája minden színből 11 árnyalatot tartalmaz (50-950):

gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan,
sky, blue, indigo, violet, purple, fuchsia, pink, rose

Az árnyalatok skálája: 50 (legvilágosabb) → 950 (legsötétebb).

Background color

<div class="bg-white">Fehér háttér</div>
<div class="bg-gray-100">Halvány szürke háttér</div>
<div class="bg-gray-900">Sötét háttér</div>
<div class="bg-blue-500">Kék háttér</div>
<div class="bg-blue-600">Sötétebb kék háttér</div>
<div class="bg-transparent">Átlátszó háttér</div>

Text color

<p class="text-gray-900">Sötét szöveg (fehér háttérre)</p>
<p class="text-gray-100">Világos szöveg (sötét háttérre)</p>
<p class="text-blue-600">Kék link szín</p>

Gradientek

A Tailwind beépített gradient utility-ket tartalmaz:

<!-- Vízszintes gradient (balról jobbra) -->
<div class="bg-gradient-to-r from-blue-500 to-purple-600">
  Kék → Lila gradient
</div>

<!-- Átlós gradient -->
<div class="bg-gradient-to-br from-pink-500 via-red-500 to-orange-500">
  Átlós, háromszínű gradient
</div>

<!-- Függőleges gradient -->
<div class="bg-gradient-to-b from-gray-900 to-gray-700">
  Sötét függőleges gradient
</div>

Gradient irányok: to-t (fel), to-b (le), to-l (bal), to-r (jobb), to-tl, to-tr, to-bl, to-br.

Opacity

Az opacity-t a opacity-[érték] utility-vel állítod be:

<div class="opacity-100">Teljesen látható</div>
<div class="opacity-75">75% látható</div>
<div class="opacity-50">50% látható</div>
<div class="opacity-25">25% látható</div>
<div class="opacity-0">Teljesen átlátszó</div>

A v4-ben a háttérszín opacity-ját közvetlenül is beállíthatod:

<!-- A háttérszín 50%-os opacitással -->
<div class="bg-blue-500/50">...</div>

<!-- A szöveg 75%-os opacitással -->
<p class="text-gray-900/75">...</p>

Összefoglaló

A szín paletta mindenre elég – ritkán kell egyedi színeket felvenni. A bg-[szín]-[500] a normál szín, 600 a hover állapothoz, 100 a halvány változathoz. Az /[opacity] szintaxis a v4-es módszer a szín áttetszőségéhez – elegánsabb mint az opacity utility.

Színek és hátterek