Što je Tailwind CSS? Vodič običnim jezikom za graditelje aplikacija

Tailwind CSS je alat za oblikovanje web stranica. Umjesto pisanja zasebnih stilskih pravila u vlastitoj datoteci, svakom elementu dajete kratke, gotove nazive klasa — bg-white za bijelu pozadinu, p-4 za unutarnji razmak, text-lg za veći tekst, rounded-xl za zaobljene kutove — a Tailwind proizvodi CSS koji preglednik treba. Besplatan je, open source i jedan od najčešćih načina oblikovanja modernih web aplikacija.

Zašto je Tailwind važan kad gradite uz AI

Ako gradite web aplikaciju uz AI graditelja, vjerojatno je vaša aplikacija oblikovana Tailwindom. Mythex, na primjer, pokreće nove projekte na Vite + React + TypeScript + Tailwind, osim ako ne zatražite nešto drugo (kako se bira tehnologija).

To vam je važno na tri načina:

• Promjene dizajna su jeftine. Budući da je oblikovanje uz svaki gumb, karticu i naslov, AI može promjenu „neka kartice budu manje zbijene“ napraviti uređivanjem nekoliko naziva klasa na jednom mjestu.
• Možete to čitati. Tailwind klase su bliske običnom engleskom. text-center font-bold text-2xl nije teško dekodirati, čak i ako nikad niste pisali kod.
• Izgled ostaje dosljedan. Tailwind dolazi s fiksnom ljestvicom veličina, razmaka i boja. To sprječava da aplikacija završi s 14 malo različitih nijansi sive.

Svakodnevna usporedba

Zamislite farbanje kuće.

Običan CSS je kao miješanje vlastite boje za svaki zid. Imate potpunu slobodu, ali nakon nekog vremena dnevna soba je „topla bijela“, hodnik „malo toplije bijela“ i nitko se ne sjeća zašto.

Tailwind je kao katalog boja u farbari uz set označenih naljepnica. Svaki zid dobiva naljepnicu — „bijela, mat, 2 sloja“ — a katalog nudi samo odabrane nijanse. Izgubite malo slobode, ali svi na poslu znaju kako točno svaki zid treba izgledati, samo čitanjem naljepnice.

Kako Tailwind radi

Web stranica se sastoji od HTML-a (sadržaj i struktura) i CSS-a (izgled). Obično CSS živi u zasebnoj datoteci s pravilima ovakvog oblika:

.card {
  background: white;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

Uz Tailwind preskačete pisanje tog pravila i stavljate klase izravno na element:

<div class="bg-white p-4 rounded-xl shadow-sm">
  Your booking is confirmed
</div>

Svaka klasa obavlja jedan mali posao. Kad se aplikacija izgradi, Tailwind pregledava vaše datoteke, pronalazi klase koje ste stvarno koristili i generira CSS samo za njih. Zato je konačni stilski list mali.

Tailwind verzija 4, trenutna glavna verzija, postavlja se uz vrlo malo konfiguracije: instalirate ga, dodate njegov dodatak u alat za izgradnju i stavite @import "tailwindcss"; na vrh CSS datoteke. Prilagodbe, poput brendiranih boja i fontova, definiraju se u CSS-u kao dizajn tokeni, a ne u velikoj JavaScript konfiguracijskoj datoteci kao u starijim verzijama. Ako čitate stariji vodič koji spominje tailwind.config.js, upravo zato.

Radni primjer: kartica cijene

Recimo da ste od AI graditelja zatražili stranicu s cijenama i želite da se kartica „Pro“ istakne. Kod kartice može izgledati ovako (u React komponenti class se piše kao className):

<div className="rounded-2xl border border-gray-200 p-6">
  <h3 className="text-lg font-semibold">Pro</h3>
  <p className="mt-2 text-4xl font-bold">$25</p>
  <button className="mt-6 w-full rounded-lg bg-gray-900 px-4 py-2 text-white">
    Start trial
  </button>
</div>

Čitajući slijeva nadesno:

Ako zatražite „neka kartica Pro se istakne plavim okvirom i suptilnom sjenom“, AI može promijeniti border-gray-200 u border-2 border-blue-600 i dodati shadow-lg. To je cijela promjena.

Responzivni dizajn i tamni način rada

Tailwind ima kratke prefikse za veličine ekrana i stanja:

• md:grid-cols-3 — tri stupca na srednjim i većim ekranima; na telefonu vrijedi zadani jedan stupac. Tailwind je mobile-first: klase bez prefiksa vrijede svugdje, a prefiksi dodaju promjene za veće ekrane.
• hover:bg-gray-700 — tamniji gumb kad je miš iznad njega.
• dark:bg-gray-900 — druga pozadina kad je uključen tamni način rada.

Zato je traženje responzivnog izgleda za mobitel ili tamnog načina rada obično brzo u Tailwind projektu.

Ključni pojmovi

Uobičajene zablude

• „Tailwind je dizajn.“ Nije. Tailwind daje gradivne blokove, a ne izgled. Dvije Tailwind stranice mogu izgledati potpuno različito. Generički „AI izgled aplikacije“ dolazi iz zadanih postavki, a ne iz Tailwinda — dajte svom graditelju stvarne smjernice. Pogledajte kako dizajnirati dobro izgledajuću aplikaciju uz AI.
• „Isto je kao inline stilovi.“ Nije sasvim. Klase dolaze iz zajedničke ljestvice, podržavaju hover, tamni način rada i breakpointe te se u trenutku izgradnje pretvaraju u obične CSS pravila.
• „Tailwind čini stranice teškima.“ Izgradnja uključuje samo klase koje koristite, pa je CSS koji se šalje posjetiteljima obično mali.
• „Dugi popisi klasa znače neuredan kod.“ Isprva izgledaju zauzeto, ali sve o izgledu elementa je na jednom mjestu. Ponavljajući obrasci se obično izdvajaju u komponente, poput jedne komponente Button.
• „Ako koristim Tailwind, ne mogu koristiti vlastiti CSS.“ Uvijek možete napisati običan CSS kad vam zatreba.

Što tražiti od AI graditelja

• „Definiraj boje i fontove brenda jednom kao tema tokene i koristi ih svugdje umjesto unaprijed upisanih boja.“
• „Neka svaka kartica, gumb i polje imaju isti radijus kuta i razmak.“
• „Provjeri raspored na širini mobitela i popravi sve što izlazi izvan okvira ili je premalo za dodir.“
• „Dodaj tamni način rada koristeći Tailwindovu dark: varijantu i pazi da kontrast teksta ostane čitljiv.“
• „Izdvoji ponavljajuće stilove gumba u jednu višekratnu komponentu Button.“
• „Objasni Tailwind klase u ovom odjeljku običnim jezikom.“

Tailwind u Mythexu

Novi Mythex projekti koriste Tailwind po zadanom, zajedno s Reactom i TypeScriptom, pa vizualne promjene možete tražiti običnim riječima i vidjeti ih u živom pregledu. Ako radije vidite kod, uređivač koda prikazuje svaku klasu (samo za čitanje na Free planu, uređivo na Pro planu). Ako preferirate običan CSS ili drugačiju postavku, recite to u prvom upitu — dokumentacija objašnjava kako se odabire stack.

Pitanja