Hvað er Tailwind CSS? Einföld leiðsögn fyrir smiði forrita

Tailwind CSS er verkfærakista til að stíla vefsíður. Í stað þess að skrifa sérstakar stílreglur í sinni eigin skrá gefurðu hverju element stutt, tilbúin klasaheiti: bg-white fyrir hvítan bakgrunn, p-4 fyrir innra bil, text-lg fyrir stærri texta og rounded-xl fyrir ávöl horn. Tailwind býr þá til CSS sem vafrinn þarf. Það er ókeypis, opinn hugbúnaður og ein algengasta leiðin til að stíla nútímalega vefforrit.

Af hverju Tailwind skiptir máli þegar þú smíðar með gervigreind

Ef þú smíðar vefapp með AI-smið eru góðar líkur á að appið þitt sé stílað með Tailwind. Mythex byrjar til dæmis nýjar verkefni á Vite + React + TypeScript + Tailwind nema þú biðjir um eitthvað annað (hvernig tæknin er valin).

Það skiptir þig máli á þrjá vegu:

• Hönnunarbreytingar eru ódýrar. Því að stíllinn er beint við hvern hnapp, kort og fyrirsögn getur gervigreindin breytt „gerðu kortin minna þröng“ með því að breyta nokkrum klasaheitum á einum stað.
• Þú getur lesið það. Tailwind-klasar eru nálægt venjulegri ensku. text-center font-bold text-2xl er ekki erfitt að ráða, jafnvel þótt þú hafir aldrei skrifað kóða.
• Útlitið helst samræmt. Tailwind kemur með fastan kvarða fyrir stærðir, bil og liti. Það kemur í veg fyrir að app endi með 14 örlítið mismunandi gráum tónum.

Hversdagsdæmi

Hugsaðu um málningu og húsbyggingu.

Hreint CSS er eins og að blanda sína eigin málningu á hvern vegg. Þú hefur fullt frelsi, en eftir smá tíma er stofan „hlýr hvítur“, ganginn er „örlítið hlýrri hvítur“ og enginn man af hverju.

Tailwind er eins og litakort málningarbúðar með merkimiðum. Hver veggur fær miða, „hvítt, matt, 2 umferðir“, og kortið býður aðeins upp á valda liti. Þú missir dálítið af frelsi, en allir á verkstaðnum vita nákvæmlega hvernig hver veggur á að líta út með því að lesa miðann.

Hvernig Tailwind virkar

Vefsíða er byggð úr HTML (innihaldi og uppbyggingu) og CSS (útliti). Venjulega býr CSS í sérstakri skrá með reglum eins og þessari:

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

Með Tailwind sleppirðu að skrifa þessa reglu og setur þess í stað nytjaklasa beint á elementið:

<div class="bg-white p-4 rounded-xl shadow-sm">
  Bókunin þín er staðfest
</div>

Hver klasi gerir eitt lítið verk. Þegar appið er byggt skannar Tailwind skrárnar þínar, finnur klasana sem þú notaðir í raun og býr aðeins til CSS fyrir þá. Það heldur lokastílaskránni smárri.

Tailwind útgáfa 4, núverandi meiriháttar útgáfa, er sett upp með mjög litlum stillingum: þú setur það upp, bætir viðbótinni við byggingartólið þitt og setur @import "tailwindcss"; efst í CSS-skránni. Sérsniðningar, eins og vörumerkjalitir og leturgerðir, eru skilgreindar í CSS sem hönnunarbreytur í stað stórrar JavaScript-stillingarskrár eins og eldri útgáfur þurftu. Ef þú lest eldri kennslu sem nefnir tailwind.config.js er það ástæðan.

Dæmi: verðkort

Segjum að þú hafir beðið AI-smiðinn um verðsíðu og viljir að „Pro“-kortið skeri sig úr. Kóðinn fyrir kortið gæti litið svona út (í React-íhlut heitir class 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">
    Hefja prufutímabil
  </button>
</div>

Lesið frá vinstri til hægri:

Ef þú biður um „láttu Pro-kortið skera sig úr með bláa rönd og lúmskan skugga“ gæti gervigreindin breytt border-gray-200 í border-2 border-blue-600 og bætt við shadow-lg. Það er öll breytingin.

Svarandi hönnun og dökk stilling

Tailwind hefur stutt forskeyti fyrir skjástærðir og ástönd:

• md:grid-cols-3: þrír dálkar á meðalstórum skjám og stærri; í síma gildir sjálfgefni einn dálkur. Tailwind er fyrst hannað fyrir farsíma: óforskeytt klasar gilda alls staðar og forskeyti bæta við breytingum fyrir stærri skjái.
• hover:bg-gray-700: dekkri hnappur þegar músin er yfir honum.
• dark:bg-gray-900: annar bakgrunnur þegar dökk stilling er virk.

Þess vegna er oft fljótlegt að biðja um farsímavænt útlit eða dökka stillingu í Tailwind-verkefni.

Lykilhugtök

Algengar ranghugmyndir

• „Tailwind er hönnun.“ Það er ekki rétt. Tailwind gefur þér byggingarkubba, ekki útlit. Tvær Tailwind-síður geta litið algerlega ólíkt út. Hið almenna „AI-appa-útlit“ kemur úr sjálfgefnum stillingum, ekki frá Tailwind sjálfu, svo gefðu smiðnum þínum raunverulega stefnu. Sjá hvernig þú hannar gott app með gervigreind.
• „Þetta er það sama og innlínustílar.“ Ekki alveg. Klasarnir koma af sameiginlegum kvarða, styðja músaryfirferð, dökka stillingu og brotpunkta og verða að venjulegu CSS við byggingu.
• „Tailwind gerir síður þungar.“ Byggingin tekur aðeins með þá klasa sem þú notar, svo CSS sem sent er til gesta er yfirleitt lítið.
• „Langir klasalistar þýða ruglingslegan kóða.“ Þeir líta flóknir út í fyrstu, en allt um útlit elements er á einum stað. Endurteknum mynstrum er yfirleitt safnað í íhluti, eins og einn Button.
• „Ef ég nota Tailwind get ég ekki notað sérsniðið CSS.“ Þú getur alltaf skrifað venjulegt CSS þegar þú þarft.

Hvað á að biðja AI-smiðinn um

• „Skilgreindu vörumerkjalitina og leturgerðirnar okkar einu sinni sem þemabreytur og notaðu þær alls staðar í stað kóðaðra lita.“
• „Láttu öll kort, hnappa og innsláttarreiti hafa sama hornradíus og bil.“
• „Athugaðu útlitið í símabreidd og lagfærðu allt sem flæðir yfir eða er of lítið til að smella á.“
• „Bættu við dökkri stillingu með dark:-afbrigði Tailwind og tryggðu að textinn sé nógu skýr.“
• „Dragðu endurteknu hnappastílana saman í einn endurnýtanlegan Button-íhlut.“
• „Útskýrðu Tailwind-klasana í þessum kafla á venjulegu máli.“

Tailwind í Mythex

Ný Mythex-verkefni nota Tailwind sjálfgefið ásamt React og TypeScript, svo þú getur beðið um sjónrænar breytingar með venjulegum orðum og séð þær í beinni forskoðun. Ef þú vilt sjá kóðann sýnir kóðaritillinn alla klasana (lesaðgengilegt á Free, breytanlegt á Pro). Ef þú vilt heldur hreint CSS eða annað uppsetningarform skaltu segja það í fyrstu skipun þinni. Skjölin útskýra hvernig stafla er valinn.

Spurningar