Šta je Tailwind CSS? Vodič jednostavnim jezikom za graditelje aplikacija

Tailwind CSS je alat za stilizovanje web sajtova. Umjesto pisanja zasebnih pravila u posebnoj datoteci, svakom elementu dajete kratke, gotove nazive klasa — bg-white za bijelu pozadinu, p-4 za unutrašnji razmak, text-lg za veći tekst, rounded-xl za zaobljene ivice — a Tailwind proizvodi CSS koji pregledač treba. Besplatan je, open source je i jedan je od najčešćih načina na koji se stilizuju savremene web aplikacije.

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

Ako pravite web aplikaciju uz AI alat za izradu, postoji velika šansa da je vaša aplikacija stilizovana Tailwindom. Mythex, na primjer, pokreće nove projekte na Vite + React + TypeScript + Tailwind osim ako ne tražite nešto drugo (kako se bira tehnologija).

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

• Izmjene dizajna su jeftine. Pošto stilovi žive pored svakog dugmeta, kartice i naslova, AI može na zahtjev „neka kartice budu manje zbijene“ promijeniti 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 dešifrovati, čak i ako nikada niste pisali kod.
• Izgled ostaje dosljedan. Tailwind dolazi sa fiksnom skalom veličina, razmaka i boja. To sprječava da aplikacija završi sa 14 malo različitih nijansi sive.

Svakodnevna analogija

Zamislite farbanje kuće.

Običan CSS je kao da mešate sopstvenu boju za svaki zid. Imate potpunu slobodu, ali posle nekog vremena dnevna soba je „topla bijela“, hodnik je „malo toplija bijela“ i niko više ne pamti zašto.

Tailwind je kao katalog boja u prodavnici farbi plus set označenih nalijepnica. Svaki zid dobija nalijepnicu — „bijela, mat, 2 sloja“ — a katalog nudi samo odabrani skup nijansi. Gubite malo slobode, ali svi na poslu znaju kako svaki zid treba da izgleda samo čitajući nalijepnicu.

Kako Tailwind funkcioniše

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

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

Sa Tailwindom preskačete pisanje tog pravila i stavljate uslužne klase direktno na element:

<div class="bg-white p-4 rounded-xl shadow-sm">
  Vaša rezervacija je potvrđena
</div>

Svaka klasa obavlja jedan mali zadatak. Kada se aplikacija izgradi, Tailwind pregleda vaše datoteke, pronalazi klase koje ste zaista koristili i generiše CSS samo za njih. Tako konačni stylesheet ostaje mali.

Tailwind verzija 4, trenutna glavna verzija, podešava se uz vrlo malo konfiguracije: instalirate ga, dodate njegov plugin u alat za izgradnju i stavite @import "tailwindcss"; na vrh CSS datoteke. Prilagođavanja poput brendiranih boja i fontova definišu se u CSS-u kao dizajn tokeni, a ne u velikoj JavaScript konfiguracionoj datoteci, kao što su tražile starije verzije. Ako čitate stariji tutorijal koji spominje tailwind.config.js, upravo zato.

Praktičan primjer: kartica cjenovnika

Recimo da ste od AI alata zatražili stranicu cjenovnika 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">
    Započni probni period
  </button>
</div>

Čitajući slijeva nadesno:

Ako zatražite „neka se kartica Pro istakne plavom ivicom i suptilnom sjenkom“, 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 režim

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

• md:grid-cols-3 — tri kolone na srednjim ekranima i većim; na telefonu se primjenjuje podrazumijevana jedna kolona. Tailwind je mobile-first: klase bez prefiksa važe svuda, a prefiksi dodaju promjene za veće ekrane.
• hover:bg-gray-700 — tamnije dugme kada je miš iznad njega.
• dark:bg-gray-900 — drugačija pozadina kada je uključen tamni režim.

Zato je traženje izgleda prilagođenog mobilnim uređajima ili tamnog režima obično brzo u Tailwind projektu.

Ključni pojmovi

Česte zablude

• „Tailwind je dizajn.“ Nije. Tailwind vam daje građevne blokove, a ne izgled. Dva Tailwind sajta mogu izgledati potpuno različito. Generički „AI izgled aplikacije“ dolazi od podrazumijevanih postavki, a ne od samog Tailwinda — dajte svom alatu jasne smjernice. Pogledajte kako dizajnirati dobro izgledajuću aplikaciju uz AI.
• „To je isto kao inline stilovi.“ Nije sasvim. Klase dolaze iz zajedničke skale, podržavaju hover, tamni režim i prijelome ekrana i pretvaraju se u obični CSS u trenutku izgradnje.
• „Tailwind čini stranice teškim.“ Izgradnja uključuje samo klase koje koristite, pa je CSS koji se šalje posjetiocima obično mali.
• „Duge liste klasa znače neuredan kod.“ Isprva izgledaju zauzeto, ali je sve o izgledu elementa na jednom mjestu. Ponavljajući obrasci se obično izdvajaju u komponente, poput jednog Button.
• „Ako koristim Tailwind, ne mogu koristiti prilagođeni CSS.“ I dalje možete pisati običan CSS kada vam zatreba.

Šta tražiti od vašeg AI alata

• „Definiši boje i fontove naše marke jednom kao tematske tokene i koristi ih svuda umjesto unaprijed upisanih boja.“
• „Neka svaka kartica, dugme i polje imaju isti zaobljeni ugao i razmak.“
• „Provjeri raspored na širini telefona i popravi sve što izlazi van okvira ili je premalo za dodir.“
• „Dodaj tamni režim koristeći Tailwindov dark: varijantu i osiguraj da kontrast teksta ostane čitljiv.“
• „Izdvoji ponavljajuće stilove dugmadi u jednu višekratno upotrebljivu Button komponentu.“
• „Objasni Tailwind klase u ovoj sekciji običnim engleskim jezikom.“

Tailwind u Mythexu

Novi Mythex projekti podrazumijevano koriste Tailwind zajedno sa Reactom i TypeScriptom, pa vizuelne promjene možete tražiti običnim riječima i odmah ih vidjeti u živom Preview-u. Ako radije želite da vidite kod, uređivač koda prikazuje svaku klasu (samo za čitanje na Free planu, izmjenjiv na Pro planu). Ako više volite običan CSS ili drugačije podešavanje, recite to u prvom upitu — dokumentacija objašnjava kako se bira stack.

Pitanja