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 är ett CSS-ramverk som erbjuder en samling lågnivå-verktygsklasser. Dessa klasser kan läggas direkt till i din markup för att skapa designer utan att behöva skriva CSS-kod från grunden. Huvudidén bakom Tailwind är att du genom att helt enkelt lägga till lämpliga klasser kan applicera önskad stil på dina element.

### Till exempel:
```html
<button class="bg-green-600 text-white px-4 py-2 rounded">Green button</button>
```
Knapp-elementet får en grön bakgrund med vit text. Det får även utfyllnad och rundade hörn.

## Tillbaka till projektet
Lägg till ytterligare ett element i vår app med Tailwind-stil. Kopiera `div`-elementet nedan och klistra in det ovanför `p`-elementet i filen `app/page.tsx`.

Efter att ändringarna har gjorts, spara dem och kontrollera den live-sidan. Du bör nu se en vit cirkulär form.

Lär dig att bygga moderna, högpresterande webbapplikationer med Next.js. Sätt upp projekt med strukturerade layouter, styling och routing för smidig navigering. Hämta och visa data effektivt samtidigt som rendering och prestanda optimeras. Implementera avancerade funktioner som paginering, CRUD-operationer och global sökning för dynamiska webbappar. Distribuera dina Next.js-projekt, anslut dem till databaser och lägg till autentisering för att skydda användardata.

Vi diskuterar vad du behöver kunna innan du börjar med Next.js-ramverket, vad du kan förvänta dig av denna kurs och vad du kommer att bygga.

Vi kommer att konfigurera projektet, undersöka olika sätt att lägga till styling i vår app och behandla visuella aspekter såsom bilder, typsnitt, sidor och layouter.

Lär dig att enkelt skapa och hantera en ny vy för din applikation samt navigera mellan alla sidor smidigt med ett inbyggt routingsystem.

Distribuera Next.js-appen med hjälp av GitHub- och Vercel-konton. Upprätta dessutom en databas för att förse appen med nödvändig data.

Överväg hur data kan erhållas och presenteras för användaren på ett tydligt och effektivt sätt.

Utforska hur moderna webbtekniker som paginering, CRUD-operationer, global sökning, formulärvalidering och mer implementeras.

Implementering av autentisering i Next.js.

Använda Tailwind CSS för Styling

Till exempel:

Tillbaka till projektet

I praktiken

Awesome!

Använda Tailwind CSS för Styling

Till exempel:

Tillbaka till projektet

I praktiken