Kas yra Tailwind CSS? Paprastas vadovas programėlių kūrėjams

Tailwind CSS – tai svetainių stiliaus įrankių rinkinys. Vietoj atskirų stiliaus taisyklių atskirame faile kiekvienam elementui suteikiate trumpus, paruoštus klasių pavadinimus – bg-white baltam fonui, p-4 vidiniam tarpui, text-lg didesniam tekstui, rounded-xl suapvalintiems kampams – o Tailwind sukuria naršyklei reikalingą CSS. Jis nemokamas, atviro kodo ir vienas dažniausių šiuolaikinių žiniatinklio programėlių stilizavimo būdų.

Kodėl Tailwind svarbus kuriant su AI

Jei kuriate žiniatinklio programėlę su AI kūrimo įrankiu, didelė tikimybė, kad jūsų programėlė stilizuota su Tailwind. Pavyzdžiui, Mythex naujus projektus pradeda su Vite + React + TypeScript + Tailwind, nebent paprašote kitaip (kaip parenkamos technologijos).

Tai jums svarbu trimis aspektais:

• Dizaino pakeitimai pigūs. Kadangi stiliai laikomi tiesiai šalia kiekvieno mygtuko, kortelės ir antraštės, AI gali pakeisti „padaryk korteles mažiau susigrūdusias“ redaguodamas kelias klases vienoje vietoje.
• Galite tai perskaityti. Tailwind klasės panašios į paprastą anglų kalbą. text-center font-bold text-2xl nėra sunku iššifruoti, net jei niekada nerašėte kodo.
• Išvaizda lieka nuosekli. Tailwind turi fiksuotą dydžių, tarpų ir spalvų skalę. Tai neleidžia programėlei įgyti 14 truputį skirtingų pilkų atspalvių.

Kasdienė analogija

Pagalvokite apie dažus ir namo statybą.

Paratas CSS yra tarsi kiekvienai sienai maišyti savo dažus. Laisvė visiška, bet po kurio laiko svetainė yra „šiltai balta“, koridorius – „šiek tiek šiltesnė balta“, ir niekas nebeprisimena kodėl.

Tailwind yra tarsi dažų parduotuvės spalvų katalogas su etiketėmis. Kiekviena siena gauna lipduką – „balta, matinė, 2 sluoksniai“ – ir katalogas siūlo tik kuruotą atspalvių rinkinį. Laisvės šiek tiek netenkate, bet visi darbe vien perskaitę lipduką tiksliai žino, kaip turi atrodyti siena.

Kaip veikia Tailwind

Tinklalapis sudarytas iš HTML (turinio ir struktūros) ir CSS (išvaizdos). Paprastai CSS gyvena atskirame faile su tokiomis taisyklėmis:

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

Su Tailwind šios taisyklės nerašote, o utilitarines klases dedate tiesiai ant elemento:

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

Kiekviena klasė atlieka vieną mažą darbą. Programėlei sukūrus, Tailwind nuskaito jūsų failus, suranda faktiškai panaudotas klases ir sugeneruoja CSS tik joms. Tai padaro galutinį stiliaus lapą mažą.

Tailwind 4 versija – dabartinė pagrindinė versija – nustatoma su labai mažai konfigūracijos: įdiegiate, pridedate jo papildinį prie savo kūrimo įrankio ir į CSS failo viršų įrašote @import "tailwindcss";. Pritaikymai, pavyzdžiui, prekės ženklo spalvos ir šriftai, apibrėžiami CSS kaip dizaino žetonai, o ne didelėje JavaScript konfigūracijos byloje, kaip reikėdavo senesnėms versijoms. Jei skaitote senesnį vadovą, kuriame minimas tailwind.config.js, būtent dėl to.

Darbo pavyzdys: kainų kortelė

Tarkime, paprašėte AI kūrimo įrankio kainų puslapio ir norite, kad kortelė „Pro“ išsiskirtų. Kortelės kodas galėtų atrodyti taip (React komponente class rašomas kaip 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>

Skaitydami iš kairės į dešinę:

Jei paprašysite „padaryk Pro kortelę išsiskiriančią mėlynu rėmeliu ir subtiliu šešėliu“, AI gali pakeisti border-gray-200 į border-2 border-blue-600 ir pridėti shadow-lg. Tiek ir yra viso pakeitimo.

Atsakingas dizainas ir tamsusis režimas

Tailwind turi trumpus priesagas ekrano dydžiams ir būsenoms:

• md:grid-cols-3 – trys stulpeliai vidutiniuose ir didesniuose ekranuose; telefone galioja numatytasis vienas stulpelis. Tailwind yra mobile-first: klasės be priesagos galioja visur, o priesagos prideda pakeitimus didesniems ekranams.
• hover:bg-gray-700 – tamsesnis mygtukas, kai ant jo užvedama pelė.
• dark:bg-gray-900 – kitoks fonas, kai įjungtas tamsusis režimas.

Todėl prašyti mobiliesiems pritaikyto išdėstymo ar tamsiojo režimo Tailwind projekte paprastai greita.

Pagrindiniai terminai

Dažni klaidingi įsitikinimai

• „Tailwind yra dizainas.“ Nėra. Tailwind suteikia statybinius blokus, o ne išvaizdą. Dvi Tailwind svetainės gali atrodyti visiškai skirtingai. Bendras „AI programėlės vaizdas“ kyla iš numatytųjų reikšmių, o ne iš Tailwind – duokite savo kūrimo įrankiui realią kryptį. Žr. kaip sukurti gerai atrodančią programėlę su AI.
• „Tai tas pats kas įterpti stiliai.“ Ne visai. Klasės ateina iš bendros skalės, palaiko užvedimą pele, tamsųjį režimą ir ekrano dydžių ribas bei kompiliavimo metu paverčiamos įprastu CSS.
• „Tailwind padaro puslapius sunkius.“ Kūrimo procesas įtraukia tik jūsų naudojamas klases, todėl lankytojams pateikiamas CSS paprastai yra mažas.
• „Ilgi klasių sąrašai reiškia netvarkingą kodą.“ Iš pradžių jie atrodo painūs, bet visa elemento išvaizda yra vienoje vietoje. Pasikartojantys šablonai paprastai iškeliami į komponentus, pavyzdžiui, į vieną Button.
• „Jei naudoju Tailwind, negaliu naudoti pasirinktinio CSS.“ Vis tiek galite rašyti įprastą CSS, kai to reikia.

Ko paprašyti AI kūrimo įrankio

• „Apibrėžk prekės ženklo spalvas ir šriftus vieną kartą kaip temos žetonus ir naudok juos visur vietoj įrašytų spalvų.“
• „Padaryk, kad kiekviena kortelė, mygtukas ir įvedimo laukas turėtų tą patį kampų suapvalinimą ir tarpus.“
• „Patikrink išdėstymą telefono plotyje ir ištaisyk viską, kas išeina už ribų arba per mažai, kad būtų galima paspausti.“
• „Pridėk tamsųjį režimą naudodamas Tailwind dark: variantą ir užtikrink, kad teksto kontrastas liktų skaitomas.“
• „Iškelk pasikartojančius mygtukų stilius į vieną pakartotinai naudojamą Button komponentą.“
• „Paaiškink šios sekcijos Tailwind klases paprasta kalba.“

Tailwind Mythex

Nauji Mythex projektai pagal numatytuosius nustatymus naudoja Tailwind kartu su React ir TypeScript, todėl vizualinius pakeitimus galite prašyti paprastais žodžiais ir matyti juos tiesioginėje peržiūroje. Jei norite matyti kodą, kodo redaktoriuje matomos visos klasės (tik skaitymui Free plane, redaguojama Pro plane). Jei norite paprasto CSS ar kitokios konfigūracijos, pasakykite tai pirmoje užklausoje – dokumentacijoje paaiškinama, kaip parenkamas steko pasirinkimas.

Klausimai