Summary  
This chapter covers using a utility-first CSS framework that provides low-level classes applied directly in markup to style elements without writing custom CSS.

General domain of usage  
Front-end web development

Tailwind CSS er et CSS-rammeværk, der tilbyder en samling af lavniveau utility-klasser. Disse klasser kan tilføjes direkte til dit markup for at skabe designs uden at skrive CSS-kode fra bunden. Hovedideen bag Tailwind er, at du ved blot at tilføje det relevante sæt klasser kan anvende de nødvendige stilarter på dine elementer.

### For eksempel:
```html
<button class="bg-green-600 text-white px-4 py-2 rounded">Green button</button>
```
Knap-elementet vil have en grøn baggrund med hvid tekst. Det vil også have polstring og afrundede hjørner.

## Tilbage til projektet
Tilføj endnu et element til din app med Tailwind-styling. Kopiér `div`-elementet nedenfor og indsæt det over `p`-elementet i filen `app/page.tsx`.

Når ændringerne er foretaget, gem og kontroller den live side. Du bør nu se en hvid cirkulær form.

Lær at opbygge moderne, højtydende webapplikationer med Next.js. Opsæt projekter med strukturerede layouts, styling og routing for problemfri navigation. Hent og vis data effektivt, mens du optimerer rendering og ydeevne. Implementer avancerede funktioner som paginering, CRUD-operationer og global søgning for dynamiske webapps. Udrul dine Next.js-projekter, tilslut dem til databaser, og tilføj autentificering for at beskytte brugerdata.

Vi gennemgår, hvad du bør have kendskab til, før du går i gang med Next.js-rammeværket, hvad du kan forvente af dette kursus, og hvilke projekter du kommer til at bygge.

Vi opsætter projektet, undersøger metoder til at tilføje styling til vores app og dækker visuelle aspekter såsom billeder, skrifttyper, sider og layouts.

Lær, hvordan du nemt opretter og administrerer et nyt view til din app og navigerer problemfrit gennem alle sider med et integreret routing-system.

Udrul Next.js-appen ved hjælp af GitHub- og Vercel-konti. Etabler desuden en database for at forsyne appen med de nødvendige data.

Overvej, hvordan data kan indhentes og vises for brugeren på en klar og effektiv måde.

Opdag, hvordan moderne webfunktioner som paginering, CRUD-operationer, global søgning, formularvalidering og mere implementeres.

Implementering af autentificering i Next.js.

Brug af Tailwind CSS til Styling

For eksempel:

Tilbage til projektet

I praksis

Awesome!

Brug af Tailwind CSS til Styling

For eksempel:

Tilbage til projektet

I praksis