Summary
This chapter introduces the utility-first approach, where small, single-purpose CSS utility classes are applied directly to HTML elements to compose complex styles without writing custom CSS.

General domain of usage
User interface styling in web development

Verktygsklasser i Tailwind CSS är små, enskilda klasser med ett specifikt syfte som du kan applicera direkt på HTML-element för att styla dem. Varje verktygsklass motsvarar en specifik CSS-egenskap och värde, vilket gör det möjligt att snabbt skapa anpassade designer utan att skriva egen CSS.

## Viktiga egenskaper
- Varje verktygsklass utför en uppgift, såsom att ange marginal, utfyllnad, färg eller teckenstorlek;
- Du kan kombinera flera verktygsklasser för att uppnå komplexa stilar;
- Användning av fördefinierade verktygsklasser säkerställer enhetlig stil i hela projektet;
- Tailwind tillhandahåller responsiva varianter av verktygsklasser för att enkelt hantera olika skärmstorlekar.

## Exempel

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+VW5kZXJzdGFuZGluZyBVdGlsaXR5IENsYXNzZXMgLSBFeGFtcGxlIDE8L3RpdGxlPgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLnRhaWx3aW5kY3NzLmNvbSI+PC9zY3JpcHQ+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBjbGFzcz0icC00IGJnLWJsdWUtNTAwIHRleHQtd2hpdGUiPgogICAgICA8aDEgY2xhc3M9InRleHQteGwgZm9udC1ib2xkIj5IZWxsbywgVGFpbHdpbmQhPC9oMT4KICAgICAgPHAgY2xhc3M9Im10LTIiPlRoaXMgaXMgYSBzaW1wbGUgZXhhbXBsZSB1c2luZyB1dGlsaXR5IGNsYXNzZXMuPC9wPgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

1. `p-4` lägger till en utfyllnad på 1rem (16px) på alla sidor;
2. `bg-blue-500` ställer in bakgrundsfärgen till en specifik nyans av blått;
3. `text-white` ställer in textfärgen till vitt;
4. `text-xl` ställer in teckenstorleken till en större storlek;
5. `font-bold` gör texten fetstil;
6. `mt-2` lägger till en övre marginal på 0,5rem (8px).

I de följande kapitlen kommer vi att gå igenom varje klass i detalj. Du behöver inte memorera alla klasser som visas här.

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.

Förståelse för Tailwinds Utility-First-Approach

Viktiga egenskaper

Exempel

Förklaring