Kaj je Tailwind CSS? Vodnik za graditelje aplikacij v preprostem jeziku

Tailwind CSS je orodje za oblikovanje spletnih strani. Namesto da pišete ločena slogovna pravila v svoji datoteki, vsakemu elementu dodate kratke, pripravljene imena razredov – bg-white za belo ozadje, p-4 za notranji rob, text-lg za večje besedilo, rounded-xl za zaobljene robove – Tailwind pa ustvari CSS, ki ga brskalnik potrebuje. Je brezplačen, odprtokoden in eden najpogostejših načinov oblikovanja sodobnih spletnih aplikacij.

Zakaj je Tailwind pomemben, ko gradite z AI

Če zgradite spletno aplikacijo z AI graditeljem, je velika verjetnost, da je vaša aplikacija oblikovana s Tailwindom. Mythex na primer nove projekte začne na Vite + React + TypeScript + Tailwind, razen če zahtevate kaj drugega (kako se izbere tehnologija).

To vam je koristno na tri načine:

• Spremembe oblikovanja so poceni. Ker slog živi tik ob vsakem gumbu, kartici in naslovu, lahko AI na eni točki spremeni »naj bodo kartice manj natrpane« z urejanjem nekaj imen razredov.
• Lahko ga preberete. Razredi Tailwinda so blizu običajni angleščini. text-center font-bold text-2xl ni težko razvozlati, tudi če še nikoli niste pisali kode.
• Videz ostane dosleden. Tailwind prinaša fiksno lestvico velikosti, razmikov in barv. Tako aplikacija ne konča s štirinajstimi malo različnimi odtenki sive.

Vsakdanja primerjava

Pomislite na barvanje hiše.

Navaden CSS je kot mešanje lastne barve za vsako steno. Imate popolno svobodo, a čez nekaj časa je dnevna soba »topla bela«, hodnik »malo toplejša bela«, nihče pa se ne spomni zakaj.

Tailwind je kot barvna karta trgovine s štetjem barv in set označevalnih nalepk. Vsaka stena dobi nalepko – »bela, mat, 2 nanosa« – karta pa ponuja le izbrani nabor odtenkov. Nekoliko izgubite svobodo, vsi pri delu pa iz nalepke natančno vedo, kako naj stena izgleda.

Kako deluje Tailwind

Spletna stran je zgrajena iz HTML-ja (vsebina in struktura) in CSS-ja (videz). Običajno CSS živi v ločeni datoteki s pravili, kot je to:

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

S Tailwindom tega pravila ne pišete, ampak pripravljene pomožne razrede neposredno dodate elementu:

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

Vsak razred opravi eno majhno nalogo. Ko se aplikacija zgradi, Tailwind pregleda vaše datoteke, poišče razrede, ki ste jih dejansko uporabili, in ustvari CSS samo za te. Tako je končni slogovni list majhen.

Tailwind različica 4, trenutna glavna različica, se nastavi z zelo malo konfiguracije: namestite ga, dodate njegov vtičnik v orodje za gradnjo in na vrh CSS datoteke zapišete @import "tailwindcss";. Prilagoditve, kot so barve blagovne znamke in pisave, so določene v CSS-ju kot oblikovalski žetoni, ne v obsežni konfiguracijski datoteki JavaScript, kot so to zahtevale starejše različice. Če v starejšem vodniku naletite na tailwind.config.js, je to razlog.

Delovni primer: kartica s cenikom

Recimo, da ste AI graditelja prosili za stran s cenami in želite, da kartica »Pro« izstopa. Koda kartice bi lahko bila takšna (v komponenti React se class zapiše kot 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">
    Začni preizkus
  </button>
</div>

Beremo od leve proti desni:

Če vprašate »naj kartica Pro izstopa z modrim robom in rahlo senco«, lahko AI spremeni border-gray-200 v border-2 border-blue-600 in doda shadow-lg. To je celotna sprememba.

Odzivna zasnova in temni način

Tailwind ima kratke predpone za velikosti zaslonov in stanja:

• md:grid-cols-3 – tri stolpce na srednjih in večjih zaslonih; na telefonu velja privzeti en stolpec. Tailwind je najprej za mobilne naprave: nepredponirani razredi veljajo povsod, predpone pa dodajo spremembe za večje zaslone.
• hover:bg-gray-700 – temnejši gumb, ko je miška nad njim.
• dark:bg-gray-900 – drugačno ozadje, ko je vklopljen temni način.

Zato je zahteva po odzivnem postavitvenem načrtu za mobilne naprave ali temnem načinu v projektu s Tailwindom običajno hitra.

Ključni pojmi

Pogoste zmote

• »Tailwind je dizajn.« Ni. Tailwind ponuja gradnike, ne videza. Dve strani, narejeni s Tailwindom, lahko izgledata popolnoma drugače. Splošen »videz aplikacij, narejenih z AI« prihaja iz privzetih nastavitev, ne iz Tailwinda – vašemu graditelju dajte resnična navodila. Glejte kako s pomočjo AI oblikovati lepo aplikacijo.
• »Enako je kot vrstični slogi.« Ni čisto tako. Razredi prihajajo iz skupne lestvice, podpirajo lebdenje miške, temni način in prelomne točke ter se ob gradnji pretvorijo v običajen CSS.
• »Tailwind naredi strani težke.« Gradnja vključi samo razrede, ki jih uporabljate, zato je CSS, ki ga dobijo obiskovalci, običajno majhen.
• »Dolgi seznami razredov pomenijo neurejeno kodo.« Na začetku so videti natrpani, a je vse o videzu elementa na enem mestu. Ponavljajoči se vzorci se običajno zberejo v komponente, na primer v en sam Button.
• »Če uporabljam Tailwind, ne morem uporabljati lastnega CSS-ja.« Vedno lahko pišete navaden CSS, kadar ga potrebujete.

Kaj zahtevati od AI graditelja

• „Barve in pisave blagovne znamke določi enkrat kot oblikovalske žetone in jih povsod uporabi namesto trdo zapisanih barv.“
• „Vsaka kartica, gumb in vnosno polje naj uporabljajo isti zaokrožen rob in razmike.“
• „Preveri postavitev pri širini telefona in popravi vse, kar gre čez rob ali je premajhno za dotik.“
• „Dodaj temni način z variantama dark: iz Tailwinda in poskrbi, da bo besedilo ostalo berljivo.“
• „Ponavljajoče se sloge gumbov zberi v en sam ponovno uporabljiv gumb (Button).“
• „Razloži razrede Tailwinda v tem delu v preprostem jeziku.“

Tailwind v Mythexu

Novi projekti v Mythexu privzeto uporabljajo Tailwind skupaj z Reactom in TypeScriptom, zato lahko vizualne spremembe zahtevate z običajnimi besedami in jih vidite v živem predogledu. Če raje vidite kodo, urejevalnik kode prikazuje vse razrede (na Free je samo za branje, na Pro ga lahko urejate). Če raje uporabljate navaden CSS ali drugačno nastavitev, to povejte v prvem pozivu – dokumentacija pojasni, kako se izbere sklad.

Vprašanja