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-rammeverk som tilbyr et sett med lavnivå verktøyklasser. Disse klassene kan legges direkte til i markupen din for å lage design uten å skrive CSS-kode fra bunnen av. Hovedideen bak Tailwind er at du ved å legge til de riktige klassene, kan bruke nødvendige stiler på elementene dine.

### For eksempel:
```html
<button class="bg-green-600 text-white px-4 py-2 rounded">Green button</button>
```
Knapp-elementet vil ha en grønn bakgrunn med hvit tekst. Det vil også ha polstring og avrundede hjørner.

## Tilbake til prosjektet
Legg til et nytt element i appen med Tailwind-styling. Kopier `div`-elementet nedenfor og lim det inn over `p`-elementet i `app/page.tsx`-filen.

Etter at endringene er gjort, lagre og sjekk den levende siden. Du skal nå se en hvit, sirkulær form.

Lær å bygge moderne, høytytende webapplikasjoner med Next.js. Sett opp prosjekter med strukturerte oppsett, styling og ruting for sømløs navigasjon. Hent og vis data effektivt samtidig som du optimaliserer rendering og ytelse. Implementer avanserte funksjoner som paginering, CRUD-operasjoner og globalt søk for dynamiske webapplikasjoner. Distribuer dine Next.js-prosjekter, koble dem til databaser og legg til autentisering for å beskytte brukerdata.

Vi skal diskutere hva du bør kunne før du begynner med Next.js-rammeverket, hva du kan forvente av dette kurset, og hva du kommer til å bygge.

Vi setter opp prosjektet, undersøker måter å legge til styling i appen vår på, og dekker visuelle aspekter som bilder, fonter, sider og oppsett.

Lær hvordan du enkelt kan opprette og administrere et nytt visningsbilde for applikasjonen din, samt navigere sømløst mellom alle sider med et integrert rutingsystem.

Distribuer Next.js-appen ved hjelp av GitHub- og Vercel-kontoer. Etabler i tillegg en database for å levere nødvendig data til appen.

Vurder hvordan data kan hentes og vises for brukeren på en tydelig og effektiv måte.

Lær hvordan du implementerer moderne nettfunksjoner som paginering, CRUD-operasjoner, globalt søk, skjemavalidering og mer.

Implementering av autentisering i Next.js.

Bruk av Tailwind CSS for Styling

For eksempel:

Tilbake til prosjektet

I praksis

Awesome!

Bruk av Tailwind CSS for Styling

For eksempel:

Tilbake til prosjektet

I praksis