Mi az a Tailwind CSS, és mikor érdemes használni?

Ha belenézel egy mai weboldal kódjába, jó eséllyel ilyen sorokat látsz: class="bg-green-500 text-black px-6 py-3 rounded-full". Ez a Tailwind CSS. Elsőre úgy néz ki, mintha valaki teleszórta volna a HTML-t rövidítésekkel, de mögötte egy nagyon tudatos megközelítés van.

A Ventoora oldala is Next.js-sel és Tailwind 4-gyel készült, így saját tapasztalatból mondom el, hogyan működik, mi a jó benne, mi kevésbé, és mi történt a Tailwind körül 2026-ban.

Mi az a Tailwind CSS?

A Tailwind CSS egy ingyenes, nyílt forráskódú CSS-keretrendszer, ami apró, egyetlen feladatú osztályokat ad. A text-center középre igazítja a szöveget, a bg-green-500 zöld hátteret ad, a p-4 belső margót. Ezekből rakod össze az elemek kinézetét közvetlenül a HTML-ben, ahelyett hogy külön CSS-fájlban írnál egyedi stílusokat. Ezt a megközelítést utility-first CSS-nek hívják.

Mára ez a legelterjedtebb CSS-keretrendszer. A State of CSS 2025-ös felmérésében a keretrendszerekről szóló kérdésre válaszoló 3977 fejlesztő közül 2041 használta a Tailwindet, a Bootstrapot 1194. A Tailwind Labs 2026-os közleménye szerint a csomagot hetente több mint 110 millió alkalommal telepítik, és erre épül többek között a ChatGPT, az X, a Cloudflare és a Reddit felülete is.

Hogyan néz ki a gyakorlatban?

Vegyünk egy kiemelt gombot. Hagyományos CSS-ben kitalálsz egy osztálynevet, és egy külön fájlban leírod a stílusát:

.gomb-kiemelt {
  background: #22c55e;
  color: #000;
  padding: 12px 24px;
  border-radius: 9999px;
}

Tailwinddel ugyanez közvetlenül az elemen van:

<a class="bg-green-500 text-black px-6 py-3 rounded-full hover:scale-105">
  Ajánlatkérés
</a>

Nem kell osztálynevet kitalálni, nem kell fájlok között ugrálni, és ha ránézel az elemre, rögtön látod, hogyan fog kinézni. A hover: előtag azt jelenti, hogy a stílus csak akkor érvényes, amikor az egér fölötte van.

Ugyanígy működnek a képernyőméretek is: az md:text-lg csak közepes és nagyobb képernyőn ad nagyobb betűt, így a mobilos nézethez sem kell külön CSS.

Tailwind osztályok egy React komponensben: a mb-10, p-10 és flex osztályok adják a kártya távolságait és elrendezését (fotó: Peaky Frames, Unsplash)

Miben más, mint a sima CSS, a Bootstrap vagy a Sass?

A leggyakoribb kérdés, hogy mihez képest jobb vagy rosszabb a Tailwind. A rövid válasz: mást old meg, mint a többi.

A Bootstrappal készült oldalak gyakran hasonlítanak egymásra, mert ugyanazokból a kész elemekből épülnek. A Tailwind nem ad kész kinézetet, csak építőkockákat, ezért bármilyen egyedi dizájn megvalósítható vele.

A Sass-szal kapcsolatban a Tailwind hivatalos dokumentációja egyértelmű: a 4-es verziót nem előfeldolgozókkal való használatra tervezték, a Tailwind maga tölti be ezt a szerepet. A változók, a beágyazás és a fájlok importálása beépítve működik.

Ha a shadcn/ui-t is hallottad már: az nem a Tailwind versenytársa, hanem egy Tailwindre épülő komponensgyűjtemény, amit a projektedbe másolsz és szabadon átírsz.

Mik az előnyei?

• Gyorsaság. Mivel nem kell osztályneveket kitalálni és fájlok között váltogatni, sokkal gyorsabban lehet dolgozni, különösen akkor, amikor egy dizájnon sokat kell finomítani.
• Egységesség. A színek, a távolságok és a betűméretek egy közös skálából jönnek, ezért az oldal minden része ugyanazt a rendszert követi. Nehéz véletlenül egy „majdnem ugyanolyan” zöldet vagy egy 13 pixeles margót használni egy 12-es helyett.
• Kis fájlméret. A Tailwind csak azokat az osztályokat generálja le, amelyeket a projektben ténylegesen használsz.

A fájlméretről a Tailwind dokumentációja azt írja, hogy tömörítve általában 10 kB alatti CSS keletkezik, még nagy projekteknél is. A ventoora.hu teljes stíluslapja tömörítve nagyjából 18 kB, ebben benne van a blogcikkek tipográfiai bővítménye és minden egyedi animáció is. Ez kevesebb, mint egyetlen közepes méretű kép.

Mik a hátrányai?

• Hosszú osztálylisták. Egy összetettebb elemen tíz-tizenöt osztály is lehet, és ez eleinte nehezen olvasható. A megoldás az, hogy az ismétlődő részeket komponensekbe szervezed, például egy Gomb komponensbe, amit aztán mindenhol újrahasznosítasz.
• Tanulási idő. Az első napokban sokszor kell a dokumentációban keresgélni, mi minek a neve. Ez gyorsan elmúlik, de tény, hogy az elején lassabb.
• A dizájnt nem csinálja meg helyetted. A Tailwind eszköz, nem dizájner. Ugyanúgy kell érzék ahhoz, hogy az oldal jól nézzen ki, mint sima CSS-sel.

Van egy kevésbé ismert buktató is, amibe mi magunk is belefutottunk. A 4-es verzióban a saját változók nevei ütközhetnek a beépített osztályokkal. Nálunk egy --spacing-xl: 4rem távolságváltozó miatt a max-w-xl osztály szélessége is 4rem lett, így egy szövegdoboz hirtelen keskeny csíkká zsugorodott. Ha furcsán kicsi elemet látsz, először a @theme blokk változóneveit nézd meg.

Mi változott a 4-es verzióban?

A Tailwind 4.0 2025 januárjában jelent meg, és két nagy változást hozott.

Az első egy teljesen újraírt motor. A Tailwind csapatának saját mérésében egy minta projekt teljes buildje 378 ezredmásodpercről 100-ra csökkent, ami 3,78-szoros gyorsulás. Az olyan újraépítés, ami nem hoz létre új CSS-t, 35 ezredmásodpercről 192 mikroszekundumra rövidült. A különbség fejlesztés közben érezhető, a látogatók számára nem.

A második, hogy a beállítások a CSS-be költöztek. A korábbi tailwind.config.js fájl helyett a színeket, betűtípusokat és töréspontokat egy @theme blokkban adod meg közvetlenül a CSS-fájlban:

@import "tailwindcss";

@theme {
  --color-marka: #22c55e;
  --font-display: "Satoshi", sans-serif;
}

Ezek natív CSS-változókként mindenhol elérhetők, és a Tailwind magától megtalálja a projekt fájljait, nem kell felsorolni őket.

Az új motor cserébe modern böngészőt kér. A hivatalos kompatibilitási oldal szerint a 4-es verzió a Chrome 111-et, a Safari 16.4-et és a Firefox 128-at feltételezi. A 3-as verzióról való átállás sem automatikus: van hozzá átállító eszköz, ami a munka nagy részét elvégzi, de egy nagyobb projektnél érdemes rá időt szánni.

Azóta három kisebb kiadás jött:

• 4.1 (2025 április): szövegárnyék és maszkolás osztályok.
• 4.2: új semleges színpaletták és saját webpack bővítmény, ami a Tailwind mérése szerint Next.js alatt több mint kétszer gyorsabb buildet ad.
• 4.3 (2026 május): görgetősáv-formázás, zoom osztályok és további logikai tulajdonságok.

Mi történt a Tailwind mögötti céggel 2026-ban?

A Tailwindet fejlesztő Tailwind Labs 2026 januárjában a mérnöki csapata 75 százalékát elbocsátotta. Adam Wathan alapító a GitHubon azt írta, hogy a dokumentáció forgalma 2023 eleje óta nagyjából 40 százalékkal esett, a bevétel pedig közel 80 százalékkal, miközben a Tailwindet többen használják, mint valaha.

Az ok az AI. A fejlesztők ma már a ChatGPT-től vagy egy kódoló asszisztenstől kérik a Tailwind-kódot, így nem jutnak el a dokumentációig, ahol a cég a fizetős termékeit ajánlotta. Ez jó példa arra, mit jelent, ha az AI-keresők elveszik a kattintásokat. Erről a GEO, vagyis AI optimalizálás oldalunkon írunk bővebben.

2026 szeptemberében a Tailwind Labs a Shopifyhoz került. Wathan bejelentése szerint a Tailwind CSS és a többi nyílt forráskódú projektjük továbbra is MIT licences marad, és ugyanaz a csapat tartja karban. Aki Tailwinddel készült oldalt használ, annak ez stabilitást jelent: egy nagy cég áll a keretrendszer mögött, ami maga is erre épít.

Mit jelent ez neked, ha nem vagy fejlesztő?

Ha weboldalt csináltatsz, nem kell értened a Tailwindhez. Annyit érdemes tudni, hogy egy Tailwinddel készült oldal CSS-e kicsi és rendezett, ami a weboldal sebességének jót tesz, és a dizájn később is könnyen, egységesen módosítható.

Egy döntési szabály: ha egyedi dizájnt szeretnél egy modern keretrendszeren, a Tailwind jó választás. Ha egy kész WordPress-sablont használsz, ott valószínűleg nem fog előkerülni, és nem is kell erőltetni.

A Tailwind nem csodaszer, de egyedi, gyors weboldalakhoz ma ez a legkézenfekvőbb eszköz. Ha érdekel, milyen technológiával dolgozunk és miért, olvasd el, mi az a Next.js, vagy hogy a WordPress vagy a Next.js a jobb választás a cégednek.

Források

• State of CSS 2025: CSS frameworks
• Tailwind Labs: Tailwind Labs is joining Shopify
• Tailwind CSS: Compatibility (preprocessors and browser support)
• Tailwind CSS: Optimizing for production (v3 documentation)
• Tailwind Labs: Tailwind CSS v4.0 announcement
• Tailwind Labs: Tailwind CSS v4.1 announcement
• Tailwind Labs: Tailwind CSS v4.3 announcement
• GitHub: Adam Wathan's comment on the Tailwind docs layoffs