Mis on Tailwind CSS? Lihtne juhend rakenduste ehitajatele

Tailwind CSS on veebisaitide kujundamise tööriistakomplekt. Selle asemel, et kirjutada eraldi stiilireegleid omaette failis, annad igale elemendile lühikesed valmisklassinimed — bg-white valge tausta jaoks, p-4 sisemise vahe jaoks, text-lg suuremat teksti jaoks, rounded-xl ümarate nurkade jaoks — ning Tailwind toodab brauserile vajaliku CSS-i. See on tasuta, avatud lähtekoodiga ja üks levinumaid viise, kuidas kaasaegseid veebirakendusi kujundatakse.

Miks Tailwind AI-ga ehitamisel oluline on

Kui ehitad veebirakendust AI rakenduste ehitajaga, on hea võimalus, et sinu rakendus on kujundatud Tailwindiga. Näiteks Mythex alustab uusi projekte Vite + React + TypeScript + Tailwind komplektiga, kui sa ei palu midagi muud (kuidas tehnoloogia valitakse).

See on sulle kolmel viisil oluline:

• Disainimuudatused on odavad. Kuna kujundus asub kohe iga nupu, kaardi ja pealkirja kõrval, saab AI muuta „tee kaardid vähem tihedaks“ muutes mõne klassinime ühes kohas.
• Seda saab lugeda. Tailwindi klassid on lähedased lihtsale inglise keelele. text-center font-bold text-2xl pole raske lahti mõtestada, isegi kui pole kunagi koodi kirjutanud.
• Välimus jääb järjepidevaks. Tailwind tuleb kindla suuruste, vahede ja värvide skaalaga. See hoiab rakenduse ära sattumast 14 natuke erinevasse halli tooni.

Igapäevane võrdlus

Mõtle värvimisele ja maja ehitamisele.

Tavaline CSS on nagu iga seina jaoks oma värvi segamine. Sul on täielik vabadus, kuid aja möödudes on elutuba „soe valge“, esik „veidi soojem valge“ ja keegi ei mäleta, miks.

Tailwind on nagu värvipoe värvikaart koos märgistatud kleepsudega. Iga sein saab kleepsu — „valge, matt, 2 kihti“ — ja kaart pakub ainult valitud toone. Kaotad natuke vabadust, kuid kõik tööl olevad inimesed teavad täpselt, milline iga sein peab välja nägema, lihtsalt kleepsu lugedes.

Kuidas Tailwind töötab

Veebileht koosneb HTML-ist (sisu ja struktuur) ja CSS-ist (välimus). Tavaliselt elab CSS eraldi failis reeglitega nagu need:

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

Tailwindiga jätad sellise reegli kirjutamata ja paned utiliidiklassid otse elemendile:

<div class="bg-white p-4 rounded-xl shadow-sm">
  Sinu broneering on kinnitatud
</div>

Iga klass teeb ühe väikese töö. Rakenduse ehitamisel skaneerib Tailwind sinu failid, leiab kasutatud klassid ja genereerib ainult nende jaoks CSS-i. See hoiab lõpliku stiilifaili väikesena.

Tailwind versioon 4, praegune põhiversioon, seadistatakse väga vähese konfiguratsiooniga: installid selle, lisad selle pluginana oma ehitustööriista ja paned @import "tailwindcss"; CSS-faili algusesse. Kohandused, näiteks brändi värvid ja fondid, määratakse CSS-is disainimärgenditena, mitte suure JavaScripti konfiguratsioonifailina, nagu vanemad versioonid nõudsid. Kui loed vanemat õpetust, mis mainib tailwind.config.js, siis sellepärast.

Töönäide: hinnakaart

Oletame, et oled palunud AI-ehitajalt hinnalehe ja tahad, et „Pro“ kaart silma paistaks. Kaardi kood võib välja näha selline (React komponendis kirjutatakse class kui 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">
    Alusta prooviperioodi
  </button>
</div>

Lugedes vasakult paremale:

Kui palud „tee Pro kaart silmapaistvaks sinise ääre ja õrna varjuga“, võib AI muuta border-gray-200 klassi border-2 border-blue-600 vastu ja lisada shadow-lg. See ongi kogu muudatus.

Responsiivne disain ja tumedad režiim

Tailwindil on ekraanisuuruste ja olekute jaoks lühikesed eesliited:

• md:grid-cols-3 — kolm veergu keskmistel ja suurematel ekraanidel; telefonil kehtib vaikimisi üks veerg. Tailwind on mobiilieelne: eesliiteta klassid kehtivad kõikjal ning eesliited lisavad muudatusi suuremate ekraanide jaoks.
• hover:bg-gray-700 — tumedam nupp, kui hiir on selle kohal.
• dark:bg-gray-900 — teistsugune taust, kui tumedad režiim on sisse lülitatud.

Sellepärast on mobiilile sobiva paigutuse või tumeda režiimi lisamine Tailwindi projektis tavaliselt kiire.

Põhimõisted

Levinud väärarusaamad

• „Tailwind on disain.“ Ei ole. Tailwind annab ehitusplokid, mitte välimust. Kaks Tailwindi saiti võivad välja näha täiesti erinevad. Üldine „AI rakenduse välimus“ tuleb vaikeseadetest, mitte Tailwindist endast — anna oma ehitajale päris suunised. Vaata kuidas AI-ga hea välimusega rakendust disainida.
• „See on sama mis reasisesed stiilid.“ Mitte päris. Klassid pärinevad ühisest skaalast, toetavad hiire peal olekut, tumedat režiimi ja murdepunkte ning muutuvad tavaliseks CSS-iks ehitamise ajal.
• „Tailwind teeb lehed raskeks.“ Ehitus lisab ainult klassid, mida kasutad, seega külastajatele saadetav CSS on tavaliselt väike.
• „Pikad klassiloendid tähendavad segast koodi.“ Need näevad esialgu hõivatud välja, kuid kogu elemendi välimus on ühes kohas. Korduvad mustrid tõstetakse tavaliselt komponentideks, näiteks üheks Button komponendiks.
• „Kui kasutan Tailwindi, ei saa ma kohandatud CSS-i kasutada.“ Saad ikka kirjutada tavalist CSS-i alati, kui vaja.

Mida paluda AI-ehitajalt

• „Defineeri meie brändi värvid ja fondid üks kord teemamärgenditena ning kasuta neid kõikjal, mitte kõvakodeeritud värve.“
• „Tee iga kaart, nupp ja sisend samade nurkade raadiuse ja vahedega.“
• „Kontrolli paigutust telefoni laiusel ja paranda kõik, mis üle ääre jookseb või on puudutamiseks liiga väike.“
• „Lisa tumedad režiim Tailwindi dark: variandi abil ja veendu, et teksti kontrast jääks loetavaks.“
• „Tõsta korduvad nuppude stiilid üheks taaskasutatavaks Button komponendiks.“
• „Selgita selle jaotise Tailwindi klasse lihtsas keeles.“

Tailwind Mythexis

Uued Mythexi projektid kasutavad Tailwindi vaikimisi koos Reactiga ja TypeScriptiga, nii et saad visuaalseid muudatusi paluda tavakeeles ja näha neid elavas eelvaates. Kui eelistad koodi näha, näitab koodiredaktor iga klassi (Free paketis ainult lugemiseks, Prol muudetav). Kui eelistad tavalist CSS-i või muud seadistust, ütle seda oma esimeses päringus — dokumentatsioon selgitab, kuidas stack valitakse.

Küsimused