Tailwind CSS ist ein CSS-Framework, das eine Sammlung von Low-Level-Utility-Klassen bietet. Diese Klassen können direkt zu Ihrem Markup hinzugefügt werden, um Designs zu erstellen, ohne CSS-Code von Grund auf neu zu schreiben. Die Hauptidee hinter Tailwind ist, dass Sie durch einfaches Hinzufügen des entsprechenden Satzes von Klassen die erforderlichen Stile auf Ihre Elemente anwenden können.

### Zum Beispiel:
```html
<button class="bg-green-600 text-white px-4 py-2 rounded">Green button</button>
```
Das Button-Element wird einen grünen Hintergrund mit weißem Text haben. Es wird auch Polsterung und abgerundete Ecken haben.

## Zurück zum Projekt
Lassen Sie uns ein weiteres Element zu unserer App mit Tailwind-Styling hinzufügen. Kopieren Sie das `div`-Element unten und fügen Sie es über dem `p`-Element in der Datei `app/page.tsx` ein.

Nachdem Sie die Änderungen vorgenommen haben, speichern Sie diese und überprüfen Sie die Live-Seite. Sie sollten jetzt eine weiße kreisförmige Form sehen.

Next.js ist ein React-Framework, das für die Erstellung von Full-Stack-Webanwendungen entwickelt wurde. Mit Next.js nutzen Sie React, um Benutzeroberflächen zu erstellen, während Sie von zusätzlichen Funktionen und Optimierungen des Frameworks profitieren.

Lassen Sie uns besprechen, was Sie lernen müssen, bevor Sie in das Next.js-Framework eintauchen, was Sie von diesem Kurs erwarten können und was Sie bauen werden.

Wir werden das Projekt einrichten, Möglichkeiten zur Hinzufügung von Styling zu unserer App untersuchen und visuelle Aspekte wie Bilder, Schriftarten, Seiten und Layouts behandeln.

Lernen Sie, wie Sie einfach eine neue Ansicht für Ihre App erstellen und verwalten und nahtlos durch alle Seiten mit einem integrierten Routing-System navigieren können.

Stellen Sie die Next.js-App mit GitHub- und Vercel-Konten bereit. Richten Sie zusätzlich eine Datenbank ein, um die App mit den notwendigen Daten zu versorgen.

Überlegen Sie, wie Sie Daten klar und effizient abrufen und dem Benutzer anzeigen können.

Entdecken Sie, wie Sie moderne Webfunktionen wie Paginierung, CRUD-Operationen, globale Suche, Formularvalidierung und mehr implementieren.

Implementierung der Authentifizierung in Next.js.

Next.js 14

Tailwind Styling

Zum Beispiel:

Zurück zum Projekt

In der Praxis