Tailwind CSS
Typography
Font size, weight, line height, text align, szín, uppercase, truncate, letter spacing.
Typography
Font size
<p class="text-xs">Extra kis szöveg (12px)</p>
<p class="text-sm">Kis szöveg (14px)</p>
<p class="text-base">Alap szöveg (16px)</p>
<p class="text-lg">Nagy szöveg (18px)</p>
<p class="text-xl">Extra nagy (20px)</p>
<p class="text-2xl">2x Extra nagy (24px)</p>
<p class="text-3xl">3x (30px)</p>
<p class="text-4xl">4x (36px)</p>
<p class="text-5xl">5x (48px)</p>
<p class="text-6xl">6x (60px)</p>Font weight
<p class="font-thin">100 – vékony</p>
<p class="font-light">300 – könnyű</p>
<p class="font-normal">400 – normál</p>
<p class="font-medium">500 – közepes</p>
<p class="font-semibold">600 – félkövér</p>
<p class="font-bold">700 – kövér</p>
<p class="font-extrabold">800 – extra kövér</p>
<p class="font-black">900 – fekete</p>Line height
<p class="leading-none">line-height: 1</p>
<p class="leading-tight">line-height: 1.25</p>
<p class="leading-snug">line-height: 1.375</p>
<p class="leading-normal">line-height: 1.5 (alapértelmezett)</p>
<p class="leading-relaxed">line-height: 1.625</p>
<p class="leading-loose">line-height: 2</p>Text igazítás
<p class="text-left">Balra igazítva</p>
<p class="text-center">Középre igazítva</p>
<p class="text-right">Jobbra igazítva</p>
<p class="text-justify">Sorkizárt</p>Text szín
A szöveg színét a text-[szín]-[árnyalat] szintaxissal állítod be:
<p class="text-gray-900">Sötét szürke szöveg</p>
<p class="text-gray-500">Közepes szürke (placeholder szövegekhez)</p>
<p class="text-blue-600">Kék szöveg</p>
<p class="text-red-500">Piros szöveg (hiba üzenetekhez)</p>
<p class="text-green-600">Zöld szöveg (siker)</p>
<p class="text-white">Fehér szöveg</p>Egyéb typography utility-k
<p class="uppercase">NAGY BETŰS</p>
<p class="lowercase">kis betűs</p>
<p class="capitalize">Minden Szó Nagybetűvel</p>
<p class="italic">Dőlt betűs</p>
<p class="underline">Aláhúzott</p>
<p class="line-through">Áthúzott</p>
<p class="no-underline">Nincs aláhúzás</p>
<p class="truncate">Túl hosszú szöveg, ami le lesz vágva...</p>
<p class="break-words">Szóhatáron töri a szöveget</p>
<p class="whitespace-nowrap">Nem töri a szöveget sehol</p>Letter spacing
<p class="tracking-tighter">Szűkebb betűköz</p>
<p class="tracking-tight">Kissé szűkebb</p>
<p class="tracking-normal">Normál</p>
<p class="tracking-wide">Szélesebb</p>
<p class="tracking-wider">Még szélesebb</p>
<p class="tracking-widest">Legtágabb</p>Összefoglaló
A typography Tailwind-del rendkívül gyors. A leggyakoribb kombináció egy title esetén:
text-2xl font-bold text-gray-900 leading-tight. Body szöveghez:text-base text-gray-600 leading-relaxed. Segéd szövegekhez (pl. label):text-sm text-gray-500 font-medium.