Tailwind CSS vs. Bootstrap: melyik a jobb, melyiket válasszam?
A Bootstrap és a Tailwind a világ legnépszerűbb CSS keretrendszerei közé tartoznak. CSS keretrendszer kiválasztásakor fontos megtalálni azt, amelyik a legjobb az igényeinknek. Ebben a posztban erre fogunk kitérni.
Tailwind CSS
A Tailwind CSS-t eredetileg Adam Wathan fejlesztette, és először 2017. november 1-jén adták ki. Ez egy "utility-first low-level" keretrendszer, ami azt jelenti, hogy "kevés class, sok CSS" helyett "sok class, kevés CSS"-t fogunk írni.
<!-- Hagyományos CSS -->
<span class="highlighted">
I'm a highlighted text.
</span>
<style>
.highlighted {
color: red;
font-weight: bold;
text-transform: uppercase;
}
</style>
<!-- Tailwind CSS -->
<span class="text-red-600 uppercase font-bold">
I'm a highlighted text.
</span>
<style>
/* No CSS needed. */
</style>
Miért jó a Tailwind CSS?
- Nem kell mindenre CSS class neveket kitalálni (pl.
sidebar-inner-wrapper) - Újrafelhasználható osztályok, tehát nem fog a végtelenségig nőni a CSS
- Minden stílus lokális, tehát bármikor nyugodtan megváltoztathatunk egy-egy stílust anélkül, hogy bármi mást érintene
Mi a különbség a Tailwind CSS és az inline CSS között?
- Inline CSS-el minden számértéket neked kell kitalálnod, míg Tailwind-ben ezek elő vannak készítve
- Az inline CSS nem támogatja a media query-ket, amik szükségesek a reszponzív design-hoz
- Az inline CSS nem támogatja a "hover", "focus" és az ezekhez hasonló element státuszokat
Bootstrap
A Bootstrap a Twitter belső tervezési eszközeinek ágaként indult 2010 közepén, és 2011. augusztus 19-én már nyílt forráskódú keretrendszerré vált. Az elsőszámú célja a reszponzív, mobilbarát megjelenés, amit egy 12 oszlopos grid rendszerrel ér el.
<!-- Mobil nézetben 4 sorban fog megjelenni, elemenként 100% szélességgel. -->
<!-- Tablet nézetben 2 sorban fog megjelenni, elemenként 50% szélességgel. -->
<!-- PC nézetben 1 sorban fog megjelenni, elemenként 25% szélességgel. -->
<div class="row">
<div class="col-12 col-md-6 col-xl-3">Product 1</div>
<div class="col-12 col-md-6 col-xl-3">Product 2</div>
<div class="col-12 col-md-6 col-xl-3">Product 3</div>
<div class="col-12 col-md-6 col-xl-3">Product 4</div>
</div>
<!-- Ez csak PC nézetben fog látszani. -->
<div class="d-none d-xl-block">
I am only visible on PC.
</div>
Miért jó a Bootstrap?
- Rendkívül gyors vele a fejlesztés, az előre definiált komponensek miatt
- Rengeteg eszközt kapunk a reszponzív, mobilbarát megjelenéshez
Teljesítmény
A Tailwind rengeteg lehetőséget felkínál arra, hogy csökkentsd a csomag méretét. Például eltávolíthatjuk a Tailwind-ből azokat a class-okat (PurgeCSS segítségével), amiket nem használunk a projektünkben. Így csak azokat a class-okat fogja tartalmazni a csomag, amikre nekünk szükségünk van. Ugyanezt megtehetjük a képernyőméretekkel is. Ha csupán 1 képernyőméretre van szükségünk, akkor máris negyedére csökkenthetjük a csomag méretét.
A Bootstrap esetében nincs ilyenre lehetőség.
Melyiket válasszam?
Attól függ mire van szükséged.
A Bootstrap egy komponens-alapú keretrendszer, ahol előre definiált elemekkel gyorsan tudunk interaktív, reszponzív és mobilbarát frontendet építeni. Ez jelentősen meggyorsítja a fejlesztést, viszont arra kényszeríti a fejlesztőt, hogy felülírja a keretrendszer által kínált alapértelmezett stílusokat a mi egyéni CSS-ünkkel. Illetve egy általános mintát követnek, így a Bootstrap alapú weboldalak gyakran hasonlítanak egymásra.
A Tailwind egy "utility-first" keretrendszer, ami csak segítséget ad abban, hogy te hozhatsd létre a saját komponenseidet. Ezáltal rugalmasabb, egyedibb felületet tudunk gyártani vele. Egymástól független stílusokból áll, így az elemek nem befolyásolják egymást.