Ce este Tailwind CSS

Tailwind CSS este un framework utilitar (low level) creat pentru a construi mai rapid interfete web, fara nevoia de a scrie cod CSS custom si fara a iesi din HTML. Mai exact, Tailwind foloseste arhitectura Atomic CSS care presupune crearea de clase mici si simple al caror scop e sa faca un singur lucru.

CSS Clasic

.card{
  font-size: 10px;
  color: red;
  text-align: center;
}

Atomic CSS

.font-10{ font-size: 10px; }
.color-red{ color: red; }
.text-center{ text-align: center; }

Folosirea Tailwind CSS seamana cu scrierea codului CSS inline, diferenta fiind faptul ca scrie clase nu proprietati CSS. Acest lucru poate incarca destul de mult layout-ul HTML dar poate face dezvoltarea mai rapid… Asta bineinteles daca ai cunostinte solide de CSS. Desi nu pare complicat, e nevoie de ceva timp ca sa inveti cat mai multe clase utile.

Exemplu Tailwind CSS

<button class="bg-blue-400 hover:bg-blue-500 text-white font-bold py-4 px-4 rounded ml-4 mt-4">
     Button
</button>

Cand sa nu folosesti Tailwind CSS?

• Cand te grabesti si ai un proiect mic sau un Proof-of-Concept (recomand Bootstrap)
• Cand esti incepator in CSS
• Cand nu iti place sa aglomerezi codul HTML
• Cand ai nevoie de performanta din prima

Alte resurse

Tailwind UI
Componente Tailwind facute de useri