Mikä on Tailwind CSS? Selkokielinen opas sovellusten rakentajille

Tailwind CSS on työkalupakki verkkosivujen tyylittelyyn. Sen sijaan, että kirjoittaisit erilliset tyylisäännöt omaan tiedostoonsa, annat jokaiselle elementille lyhyitä, valmiita luokkanimiä – bg-white valkoiselle taustalle, p-4 sisäpehmusteelle, text-lg suuremmalle tekstille, rounded-xl pyöristetyille kulmille – ja Tailwind tuottaa selaimen tarvitseman CSS:n. Se on ilmainen, avoimen lähdekoodin ja yksi yleisimmistä tavoista tyylitellä nykyaikaisia verkkosovelluksia.

Miksi Tailwind on tärkeä, kun rakennat tekoälyllä

Jos rakennat verkkosovellusta tekoälysovelluksen rakentajalla, sovelluksesi on todennäköisesti tyylitelty Tailwindilla. Mythex esimerkiksi aloittaa uudet projektit Vite + React + TypeScript + Tailwind -pinolla, ellet pyydä jotain muuta (miten tekniikka valitaan).

Se on sinulle tärkeä kolmella tavalla:

• Ulkoasumuutokset ovat halpoja. Koska tyylittely on aivan jokaisen painikkeen, kortin ja otsikon vieressä, tekoäly voi muuttaa ”tee kortit vähemmän ahtaiksi” muokkaamalla muutamaa luokkanimeä yhdessä paikassa.
• Voit lukea sen. Tailwind-luokat ovat lähellä selkokieltä. text-center font-bold text-2xl ei ole vaikea tulkita, vaikka et ole koskaan kirjoittanut koodia.
• Ulkoasu pysyy johdonmukaisena. Tailwindissa on kiinteä asteikko kokoille, välistyksille ja väreille. Se estää sovellusta päätymästä 14 hieman erilaiseen harmaaseen.

Arkinen vertaus

Ajattele maalausta ja talon rakentamista.

Tavallinen CSS on kuin sekoittaisi oman maalin jokaiseen seinään. Vapaus on täydellinen, mutta jonkin ajan kuluttua olohuone on ”lämmin valkoinen”, eteinen ”hieman lämpimämpi valkoinen” eikä kukaan muista miksi.

Tailwind on kuin maalikauppojen värikartta ja nimettyjä tarroja. Jokaisella seinällä on tarra – ”valkoinen, mattapinta, 2 kerrosta” – ja kartassa on vain valittu joukko sävyjä. Menetät hieman vapautta, mutta jokainen työmaalla tietää, miltä seinän pitää näyttää pelkästään lukemalla tarran.

Miten Tailwind toimii

Verkkosivu rakentuu HTML:stä (sisältö ja rakenne) ja CSS:stä (ulkoasu). Tavallisesti CSS asuu erillisessä tiedostossa säännöillä kuten nämä:

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

Tailwindilla jätät tuon säännön kirjoittamatta ja laitat apuluokat suoraan elementille:

<div class="bg-white p-4 rounded-xl shadow-sm">
  Varauksesi on vahvistettu
</div>

Jokainen luokka tekee yhden pienen tehtävän. Kun sovellus rakennetaan, Tailwind käy tiedostosi läpi, löytää käyttämäsi luokat ja luo CSS:n vain niille. Se pitää lopullisen tyylitiedoston pienenä.

Tailwind versio 4, nykyinen pääversio, asennetaan hyvin vähällä asetusten määrittelyllä: asennat sen, lisäät sen liitännäisen rakennustyökaluusi ja kirjoitat @import "tailwindcss"; CSS-tiedostosi alkuun. Muokkaukset, kuten brändivärit ja fontit, määritellään CSS:ssä design-tokeneina eikä suuressa JavaScript-asetustiedostossa kuten vanhemmissa versioissa. Jos luet vanhemman oppaan, jossa mainitaan tailwind.config.js, siksi.

Esimerkki: hinnoittelukortti

Oletetaan, että olet pyytänyt tekoälyrakentajalta hinnoittelusivua ja haluat ”Pro”-kortin erottuvan. Kortin koodi voisi näyttää tältä (React-komponentissa class kirjoitetaan 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">
    Aloita kokeilu
  </button>
</div>

Luettuna vasemmalta oikealle:

Jos pyydät ”tee Pro-kortista erottuva sinisellä reunuksella ja hienovaraisella varjolla”, tekoäly voi vaihtaa border-gray-200-luokan luokaksi border-2 border-blue-600 ja lisätä shadow-lg. Siinä koko muutos.

Responsiivisuus ja tumma tila

Tailwindilla on lyhyet etuliitteet näyttökokoille ja tiloille:

• md:grid-cols-3 – kolme saraketta keskikokoisilla näytöillä ja suuremmilla; puhelimessa oletuksena on yksi sarake. Tailwind on mobile-first: etuliitteettömät luokat pätevät kaikkialla, ja etuliitteet lisäävät muutoksia suuremmille näytöille.
• hover:bg-gray-700 – tummempi painike, kun hiiri on sen päällä.
• dark:bg-gray-900 – eri tausta, kun tumma tila on päällä.

Siksi mobiilivastaavan asettelun tai tumman tilan pyytäminen on yleensä nopeaa Tailwind-projektissa.

Keskeiset termit

Yleiset väärinkäsitykset

• ”Tailwind on design.” Ei ole. Tailwind antaa rakennuspalikat, ei ulkoasua. Kaksi Tailwind-sivustoa voivat näyttää täysin erilaisilta. Tekoälysovellusten yleinen ”tekoäly-ulkoasu” tulee oletuksista, ei Tailwindista – anna rakentajallesi todellista suuntaa. Katso miten suunnittelet hyvännäköisen sovelluksen tekoälyllä.
• ”Se on sama asia kuin inline-tyylit.” Ei aivan. Luokat tulevat jaetusta asteikosta, tukevat hiiren päällä -tilaa, tumman tilan ja näytönleveyksiä ja muuttuvat tavalliseksi CSS:ksi rakennusvaiheessa.
• ”Tailwind tekee sivuista raskaita.” Rakennus sisältää vain käyttämäsi luokat, joten kävijöille lähetettävä CSS on yleensä pieni.
• ”Pitkät luokkalistat tarkoittavat sotkuista koodia.” Ne näyttävät aluksi kiireisiltä, mutta kaikki elementin ulkoasuun liittyvä on yhdessä paikassa. Toistuvat kuviot siirretään yleensä komponenteiksi, kuten yhteen Button-komponenttiin.
• ”Jos käytän Tailwindia, en voi käyttää omaa CSS:ää.” Voit yhä kirjoittaa tavallista CSS:ää aina tarvittaessa.

Mitä pyytää tekoälyrakentajaltasi

• ”Määrittele brändivärit ja fontit kerran teematokeneina ja käytä niitä kaikkialla kovakoodattujen värien sijaan.”
• ”Tee jokaisesta kortista, painikkeesta ja kentästä saman pyöristyksen ja välistyksen.”
• ”Tarkista asettelu puhelimen leveydellä ja korjaa kaikki, mikä ylittää reunat tai on liian pieni napautettavaksi.”
• ”Lisää tumma tila Tailwindin dark:-muunnoksella ja varmista, että tekstin kontrasti pysyy luettavana.”
• ”Siirrä toistuvat painiketyylit yhteen uudelleenkäytettävään Button-komponenttiin.”
• ”Selitä tämän osion Tailwind-luokat selkokielellä.”

Tailwind Mythexissä

Uudet Mythex-projektit käyttävät Tailwindia oletuksena yhdessä Reactin ja TypeScriptin kanssa, joten voit pyytää visuaalisia muutoksia tavallisin sanoin ja nähdä ne live-esikatselussa. Jos haluat nähdä koodin, koodieditori näyttää jokaisen luokan (vain luku Free-paketissa, muokattavissa Pro-paketissa). Jos haluat tavallisen CSS:n tai jonkin muun asetelman, kerro se ensimmäisessä kehotteessa – dokumentaatio selittää, miten pino valitaan.

Kysymykset