Summary  
This chapter explains how to apply utility classes directly in HTML by adding them to the class attribute to control styling properties like padding, color, sizing, and hover effects.  

General domain of usage  
Front-end web development

Tailwind CSS:n utiliteettiluokkien käyttö tapahtuu lisäämällä ne HTML-elementtien `class`-attribuuttiin. Jokainen luokka vastaa tiettyä CSS-sääntöä, mikä helpottaa tyylien ymmärtämistä ja hallintaa suoraan HTML:ssä.

## HTML-rakenne
Aloita perus HTML-rakenteella.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+QXBwbHlpbmcgVXRpbGl0eSBDbGFzc2VzIC0gRXhhbXBsZSAxPC90aXRsZT4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi50YWlsd2luZGNzcy5jb20iPjwvc2NyaXB0PgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXY+CiAgICAgIDxpbWcKICAgICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvNjE1NTY3ZGEtYjA1My00Njc0LWI4OWMtMDUzMDU3ZDJiY2E3L3NlY3Rpb24tMi9idXR0ZXJmbHkuanBlZyIKICAgICAgICBhbHQ9IkJ1dHRlcmZseSIKICAgICAgLz4KICAgICAgPGRpdj4KICAgICAgICA8cD5CdXR0ZXJmbHkgLSBQYWludGVkIGxhZHk8L3A+CiAgICAgICAgPHA+CiAgICAgICAgICBUaGV5IGFyZSBtaWdyYXRvcnkuIFN0YXJ0aW5nIGluIGVhcmx5IFNwcmluZywgdGhleSBqb3VybmV5IGZyb20gQWZyaWNhIHRvIEV1cm9wZSB0byB0aGUKICAgICAgICAgIFVuaXRlZCBLaW5nZG9tIGFuZCBldmVudHVhbGx5IHRoZSBBcmN0aWMgQ2lyY2xlLgogICAgICAgIDwvcD4KICAgICAgPC9kaXY+CiAgICAgIDxidXR0b24+Rm9sbG93PC9idXR0b24+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

## Hyötyluokkien käyttäminen
Hyötyluokkien lisääminen elementtien `class`-attribuuttiin niiden tyylittämiseksi.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+QXBwbHlpbmcgVXRpbGl0eSBDbGFzc2VzIC0gRXhhbXBsZSAyPC90aXRsZT4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi50YWlsd2luZGNzcy5jb20iPjwvc2NyaXB0PgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9InAtNCBiZy1ncmF5LTEwMCByb3VuZGVkLWxnIHNoYWRvdy1tZCI+CiAgICAgIDxpbWcKICAgICAgICBjbGFzcz0iaC0xNiB3LTE2IHJvdW5kZWQtZnVsbCBteC1hdXRvIgogICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy82MTU1NjdkYS1iMDUzLTQ2NzQtYjg5Yy0wNTMwNTdkMmJjYTcvc2VjdGlvbi0yL2J1dHRlcmZseS5qcGVnIgogICAgICAgIGFsdD0iQnV0dGVyZmx5IgogICAgICAvPgogICAgICA8ZGl2IGNsYXNzPSJ0ZXh0LWNlbnRlciBtdC00Ij4KICAgICAgICA8cCBjbGFzcz0idGV4dC1sZyBmb250LXNlbWlib2xkIj5CdXR0ZXJmbHkgLSBQYWludGVkIGxhZHk8L3A+CiAgICAgICAgPHAgY2xhc3M9InRleHQtZ3JheS01MDAiPgogICAgICAgICAgVGhleSBhcmUgbWlncmF0b3J5LiBTdGFydGluZyBpbiBlYXJseSBTcHJpbmcsIHRoZXkgam91cm5leSBmcm9tIEFmcmljYSB0byBFdXJvcGUgdG8gdGhlCiAgICAgICAgICBVbml0ZWQgS2luZ2RvbSBhbmQgZXZlbnR1YWxseSB0aGUgQXJjdGljIENpcmNsZS4KICAgICAgICA8L3A+CiAgICAgIDwvZGl2PgogICAgICA8YnV0dG9uIGNsYXNzPSJtdC00IHB4LTQgcHktMiBiZy1ibHVlLTUwMCB0ZXh0LXdoaXRlIHJvdW5kZWQgaG92ZXI6YmctYmx1ZS03MDAiPgogICAgICAgIEZvbGxvdwogICAgICA8L2J1dHRvbj4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

1. `p-4`: Lisää täytettä;
2. `bg-gray-100`: Asettaa taustavärin vaaleanharmaaksi;
3. `rounded-lg`: Lisää suuret pyöristetyt kulmat;
4. `shadow-md`: Lisää keskikokoisen varjon.

1. `h-16`: Asettaa korkeuden;
2. `w-16`: Asettaa leveyden;
3. `rounded-full`: Tekee kuvasta pyöreän;
4. `mx-auto`: Keskittää kuvan vaakasuunnassa.

1. `text-center`: Keskittää tekstin;
2. `mt-4`: Lisää yläreunaan marginaalin;
3. `text-lg`: Asettaa fonttikoon suuremmaksi;
4. `font-semibold`: Tekee tekstistä puolilihavoidun;
5. `text-gray-500`: Asettaa tekstin värin harmaaksi.

1. `mt-4`: Lisää yläreunaan marginaalin;
2. `px-4`: Lisää vaakasuoran täytteen;
3. `py-2`: Lisää pystysuoran täytteen;
4. `bg-blue-500`: Asettaa taustavärin siniseksi;
5. `text-white`: Asettaa tekstin värin valkoiseksi;
6. `rounded`: Lisää pienet pyöristetyt kulmat;
7. `hover:bg-blue-700`: Muuttaa taustavärin osoittimen ollessa päällä.

Miten utiliteettiluokat lisätään HTML-elementtiin Tailwind CSS:ssä?

Opi muotoilemaan verkkosivustoja tehokkaasti Tailwind CSS:n avulla, joka on utility-first-kehys nopeaan käyttöliittymien kehitykseen. Tutustu Tailwindin käyttöönottoon ja utility-luokkien soveltamiseen väreihin, typografiaan, reunoihin ja varjoihin. Rakenna ja muotoile keskeisiä komponentteja, kuten painikkeita, kortteja ja lomakkeita. Hallitse asettelutekniikoita hyödyntämällä välistyksiä, flexboxia ja grid-apuluokkia. Luo responsiivisia suunnitelmia ja mukauta Tailwind vastaamaan projektisi tarpeita.

Tutustu Tailwind CSS:ään, utility-first-kehykseen, joka tunnetaan joustavuudestaan ja tehokkuudestaan verkkotyylittelyssä. Selvitä keskeiset hyödyt ja utility-first-filosofia. Lisäksi perehdy yksinkertaisiin asennustapoihin CDN:n tai npm/yarnin avulla.

Tutustu Tailwind CSS:n perustavanlaatuisiin elementteihin, mukaan lukien utiliteettiluokkien ymmärtäminen ja niiden soveltaminen HTML-elementteihin. Syvenny olennaisiin muotoilutekniikoihin, kuten värien, reunojen, varjojen ja typografian utiliteettien asettamiseen.

Syvenny käytännön sovelluksiin, joissa keskitytään Painikkeiden, Lomakkeiden ja Korttien luomiseen ja tyylittelyyn. Käytännön haasteiden avulla opit hallitsemaan näiden keskeisten käyttöliittymäkomponenttien rakentamisen ja kehität taitojasi todellisten esimerkkien kautta.

Tutustu Tailwind CSS:n keskeisiin väli- ja täyteominaisuuksiin sekä niiden soveltamiseen elementteihin. Sisältää myös flexbox-ominaisuuksien hyödyntämisen asettelun hallintaan näyttöasetusten, flex-suunnan sekä vaaka- ja pystysuuntaisen kohdistuksen avulla. Lisäksi perehdyt ruudukko-ominaisuuksiin yksinkertaisten mutta tehokkaiden ruudukkopohjaisten asettelujen luomiseksi, mukaan lukien ruudukkojen ja niiden osien määrittely.

Opi mukauttamaan Tailwind CSS vastaamaan projektisi suunnitteluvaatimuksia ja luomaan mukautuvia asetteluja eri laitteille.

Apuluokkien Käyttäminen HTML:ssä

HTML-rakenne

Hyötyluokkien käyttäminen

Selitys

Awesome!

Apuluokkien Käyttäminen HTML:ssä

HTML-rakenne

Hyötyluokkien käyttäminen

Selitys