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

För att använda utility-klasser i Tailwind CSS lägger du till dem i attributet `class` på dina HTML-element. Varje klass motsvarar en specifik CSS-regel, vilket gör det enkelt att förstå och hantera dina stilar direkt i HTML-koden.

## HTML-struktur
Börja med en grundläggande HTML-struktur.

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

## Tillämpning av verktygsklasser
Lägg till verktygsklasser i attributet `class` på dina element för att styla dem.

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

1. `p-4`: Lägger till utfyllnad;
2. `bg-gray-100`: Anger bakgrundsfärg till ljusgrå;
3. `rounded-lg`: Lägger till stora rundade hörn;
4. `shadow-md`: Lägger till medelstor skugga.

1. `h-16`: Anger höjd;
2. `w-16`: Anger bredd;
3. `rounded-full`: Gör bilden cirkulär;
4. `mx-auto`: Centrerar bilden horisontellt.

1. `text-center`: Centrerar texten;
2. `mt-4`: Lägger till ett övre marginal;
3. `text-lg`: Anger teckenstorleken;
4. `font-semibold`: Gör texten halvfet;
5. `text-gray-500`: Anger textfärgen till grå.

1. `mt-4`: Lägger till ett övre marginal;
2. `px-4`: Lägger till horisontell utfyllnad;
3. `py-2`: Lägger till vertikal utfyllnad;
4. `bg-blue-500`: Anger bakgrundsfärgen till blå;
5. `text-white`: Anger textfärgen till vit;
6. `rounded`: Lägger till små rundade hörn;
7. `hover:bg-blue-700`: Ändrar bakgrundsfärgen vid hovring.

Hur applicerar du utility-klasser på ett HTML-element i Tailwind CSS?

Lär dig att effektivt styla webbplatser med Tailwind CSS, ett utility-first-ramverk för snabb UI-utveckling. Upptäck hur du konfigurerar Tailwind och använder utility-klasser för färger, typografi, ramar och skuggor. Bygg och styla grundläggande komponenter som knappar, kort och formulär. Behärska layouttekniker med hjälp av avstånd, flexbox och grid-verktyg. Skapa responsiva designer och anpassa Tailwind efter projektets behov.

Lär känna Tailwind CSS, ett utility-first-ramverk känt för sin flexibilitet och effektivitet inom webbdesign. Upptäck de viktigaste fördelarna och utility-first-filosofin. Utforska dessutom de enkla installationsmetoderna med CDN eller npm/yarn.

Utforska de grundläggande elementen i Tailwind CSS, inklusive förståelse för utility-klasser och deras tillämpning på HTML-element. Fördjupa dig i viktiga stylingtekniker såsom att ange färger, ramar, skuggor och typografi-verktyg.

Fördjupa dig i praktiska tillämpningar med fokus på att skapa och styla knappar, formulär och kort. Genom praktiska utmaningar behärskar du att bygga dessa grundläggande UI-komponenter och förbättrar dina färdigheter med exempel från verkliga situationer.

Utforska Tailwind CSS grundläggande avståndsverktyg, med fokus på hur du tillämpar marginal och utfyllnad på dina element.
Lär dig använda flexbox-verktyg för att styra layout med displayinställningar, flexriktning samt horisontell och vertikal justering.
Fördjupa dig även i grid-verktyg för att skapa enkla men kraftfulla rutnätslayouter och bemästra konfigurationen av grid-behållare och grid-element.

Utforska hur du kan anpassa Tailwind CSS för att uppfylla projektets designkrav och skapa flexibla layouter för olika enheter.

Använda Verktygsklasser i HTML

HTML-struktur

Tillämpning av verktygsklasser

Förklaring

Awesome!

Använda Verktygsklasser i HTML

HTML-struktur

Tillämpning av verktygsklasser

Förklaring