Tailwind CSS cheatsheet (v4-kompatibilis)

Nyomtatáshoz: böngésző Nyomtatás (Ctrl/Cmd+P) → Méretezés: „Fit to page”, margó: „None” vagy „10 mm”. Frissítve: 2025-08-23.

Variáns prefixek (állapotok & reszponzív)

Reszponzív
sm:md:lg:xl:2xl:

Példa: sm:text-base lg:text-lg

Állapot
hover:focus:focus-visible:active:disabled:visited:

Példa: hover:bg-sky-600

Csoport & peer
group-hover:group-focus:peer-focus:peer-invalid:

Példa: group/title hover:underline

Téma & mozgás
dark:rtl:ltr:motion-safe:motion-reduce:

Példa: dark:bg-zinc-900

Adat-attribútum
[data-open]:[aria-expanded="true"]:

Példa: [data-open]:block

Nyomtatás
print:

Példa: print:hidden

Elrendezés & dobozmodell

Megjelenítés
blockinlineinline-blockflexinline-flexgridhidden

contents, table, stb.

Pozíció
staticrelativeabsolutefixedsticky
inset-0top-1/2-left-2

Szélesség/Magasság
w-*min-w-*max-w-*h-*min-h-*max-h-*
w-fullw-screenh-dvhh-screen

Példa: max-w-prose, h-96

Overflow
overflow-hiddenoverflow-x-autooverscroll-contain

Spacing (margó/padding & gap)

Margó
m-0m-1m-2m-3m-4m-6m-8m-12
mx-automt-6-mb-2

Padding
p-0p-2p-4p-6p-8
px-4py-2ps-4pe-4

Gap & space-*-*
gap-2gap-4gap-x-6gap-y-8
space-x-2space-y-4

Flex & Grid

Flex
flex-rowflex-colflex-wrap
items-startitems-centeritems-stretch
justify-startjustify-betweenjustify-center
self-startgrowshrinkbasis-1/2

Grid
grid-cols-1grid-cols-2md:grid-cols-3lg:grid-cols-4
col-span-2auto-rows-minplace-items-centerplace-content-between

Tipográfia

Méret
text-xstext-smtext-basetext-lgtext-xltext-2xltext-3xltext-4xltext-5xltext-6xltext-7xltext-8xltext-9xl
leading-6leading-7tracking-tighttracking-wide

Stílus & súly
font-sansfont-seriffont-mono
font-normalfont-mediumfont-semiboldfont-bolditalicnot-italic
text-lefttext-centertext-balance

Színek & dekoráció
text-zinc-700text-sky-600decoration-2underlineline-throughno-underline
truncateline-clamp-3

Színek, háttér, keretek

Háttér
bg-whitebg-zinc-50bg-sky-600bg-gradient-to-rfrom-sky-500via-cyan-500to-blue-600

Keret & radius
borderborder-2border-zinc-200roundedrounded-lgrounded-full

Árnyék & gyűrű
shadowshadow-mdshadow-xlring-1ring-2ring-sky-500ring-offset-2

Áttűnések & transzformációk

Transition
transitiontransition-colorsduration-200duration-500ease-inease-outdelay-75

Transform
scale-95scale-100scale-110rotate-6-rotate-3translate-y-1-translate-x-2skew-x-3

Átlátszóság & blur
opacity-0opacity-50opacity-100backdrop-blurbackdrop-blur-md

Arbitrary values (tetszőleges értékek)

p-[3px] w-[72px] h-[2.5rem] bg-[#0ea5e9] opacity-[0.85] [mask-image:linear-gradient(#000,transparent)] content-['Új']

Használatuk célszerű, de mértékkel: először próbáld a skálát.

@apply minták (ismétlődő UI-elemekhez)

Gomb

.btn {
  @apply inline-flex items-center justify-center gap-2
    px-4 py-2 rounded-lg font-medium text-white
    bg-sky-600 hover:bg-sky-700
    focus-visible:outline-none focus-visible:ring-2
    focus-visible:ring-offset-2 focus-visible:ring-sky-500
    active:translate-y-px transition;
}

Kártya

.card {
  @apply rounded-xl border border-zinc-200 bg-white p-6 shadow-sm
    dark:bg-zinc-900 dark:border-zinc-800;
}

Hasznos tippek

Ismétlődés: utility-k gyors protóhoz, @apply a brand komponensekhez.
Reszponzív egy sorban: sm:, md:, lg: variánsok kombinálhatók az állapotokkal: sm:hover:.
Sötét mód: dark: prefix; root-on class="dark" vagy media query.
Konfliktusok: ha saját CSS-t használsz, tedd @layer base|components|utilities rétegbe.

Megjegyzés: A leggyakoribb osztályokat tartalmazza; a teljes lista és változások: tailwindcss.com.