Összefoglaló táblázatok és végszó
Leggyakoribb utility class-ek, breakpointok, state modifier-ek, mikor mit válassz, fő tanulságok.
Összefoglaló táblázatok
Leggyakoribb utility class-ek
| Kategória | Class | CSS |
|---|---|---|
| Display | flex | display: flex |
grid | display: grid | |
block | display: block | |
hidden | display: none | |
| Flex | items-center | align-items: center |
justify-between | justify-content: space-between | |
flex-col | flex-direction: column | |
flex-1 | flex: 1 1 0% | |
| Spacing | p-4 | padding: 1rem |
px-4 | padding-left/right: 1rem | |
py-2 | padding-top/bottom: 0.5rem | |
m-4 | margin: 1rem | |
mx-auto | margin-left/right: auto | |
gap-4 | gap: 1rem | |
| Méret | w-full | width: 100% |
h-screen | height: 100vh | |
max-w-7xl | max-width: 80rem | |
| Szín | bg-blue-500 | kék háttér |
text-gray-900 | sötét szürke szöveg | |
border-gray-200 | halvány szürke border | |
| Typography | text-xl | font-size: 1.25rem |
font-bold | font-weight: 700 | |
leading-relaxed | line-height: 1.625 | |
tracking-wide | letter-spacing: 0.025em | |
| Border | rounded-lg | border-radius: 0.5rem |
rounded-full | border-radius: 9999px | |
border | border-width: 1px | |
shadow-md | közepes box-shadow | |
| State | hover:bg-blue-600 | hover háttérszín |
focus:ring-2 | fókusz gyűrű | |
disabled:opacity-50 | inaktív állapot | |
dark:bg-gray-900 | dark mode háttér | |
| Transition | transition-colors | szín átmenet |
duration-200 | 200ms időtartam | |
ease-in-out | gyorsítás/lassítás |
Responsive breakpointok
| Prefix | Min-width | Pixel | Tipikus use-case |
|---|---|---|---|
| (nincs) | 0px | – | Mobiltelefon (alap) |
sm: | 40rem | 640px | Nagy telefon, kis tablet |
md: | 48rem | 768px | Tablet portrait |
lg: | 64rem | 1024px | Tablet landscape, kis laptop |
xl: | 80rem | 1280px | Desktop |
2xl: | 96rem | 1536px | Nagy desktop / widescreen |
Emlékeztető: A prefix azt jelenti: "ennél és nagyobb képernyőn érvényes". Mobile-first – mindig a legkisebbre tervezz alapból, és
sm:,md:, stb. prefixszel bővítsd.
Pseudo class-ek és state modifier-ek
| Modifier | Mikor aktív | Példa |
|---|---|---|
hover: | Egér föléje kerül | hover:bg-blue-600 |
focus: | Az elem fókuszban van | focus:ring-2 |
active: | Kattintás közben | active:scale-95 |
disabled: | disabled attribútum | disabled:opacity-50 |
visited: | Látogatott link | visited:text-purple-600 |
placeholder: | Input placeholder | placeholder:text-gray-400 |
first: | Első gyerekelem | first:rounded-t-lg |
last: | Utolsó gyerekelem | last:border-b-0 |
odd: | Páratlan sorszámú | odd:bg-gray-50 |
even: | Páros sorszámú | even:bg-white |
group-hover: | Szülő group hover | group-hover:opacity-100 |
peer-checked: | Testvér peer checked | peer-checked:bg-blue-500 |
dark: | Dark mode aktív | dark:bg-gray-900 |
sm: / md: stb. | Adott breakpointtól | md:flex-row |
Mikor milyen megközelítést válasszunk?
| Helyzet | Ajánlott megoldás | Miért? |
|---|---|---|
| Egyedi, egyszer használt elem | Utility class-ek közvetlenül | Gyors, átlátható |
| 2+ helyen ismétlődő UI elem | JSX komponens | Újrafelhasználható, karbantartható |
| Variáns-alapú elem (gomb, badge) | JSX komponens + CVA | Típusbiztos, elegáns |
| Kondicionális stílusok | cn() helper | Ütközések feloldása, olvasható |
| Globális alap stílusok (h1, a, stb.) | @layer base + @apply | Érvényes use-case |
| Plain HTML / CMS szerkesztett tartalom | @layer components + @apply | Nincs JSX komponens lehetőség |
| Design token (szín, spacing) | @theme konfiguráció | Konzisztens, centralizált |
| Komplex animáció / exotikus CSS | Custom CSS + Tailwind mix | Tailwind határa |
| Harmadik fél könyvtár stílus felülírás | Custom CSS | Tailwind class-ek nem elegendők |
Végszó
A Tailwind CSS nem csupán egy rövidítési rendszer a CSS fölé – egy gondolkodásmód. Amikor megtanulod, hogy az items-center justify-between kombináció mit jelent anélkül, hogy a böngésző DevTools-ba néznél, akkor leszel igazán produktív vele.
A legfontosabb tanulságok:
- Mobile-first – mindig mobilról indulj, prefix-szel bővítsd
- Komponens > @apply – React projektben a JSX komponens a helyes absztrakció
- Teljes class nevek – soha ne generálj class nevet dinamikusan string összefűzéssel
cn()helper – kondicionális stílusokhoz kötelező- Prettier plugin – a class sorrendet automatizáld
- Design tokenen belül maradj – ha
17px-re van szükséged, gondold át
A Tailwind v4 (2025) a valaha volt leggyorsabb és legegyszerűbb verziója a frameworknek. Az egyetlen CSS import sor és az automatikus content detection drasztikusan csökkenti a boilerplate-et. Ha most kezded, közvetlenül a v4-et tanuld – a v3 config fájl-alapú megközelítése hamarosan legacy lesz.