Tailwind CSS Gebruiken voor Styling
Tailwind CSS is een CSS-framework dat een verzameling laag-niveau utility-klassen biedt. Deze klassen kunnen direct aan je markup worden toegevoegd om ontwerpen te maken zonder CSS-code vanaf nul te schrijven. Het belangrijkste idee achter Tailwind is dat je door simpelweg de juiste set klassen toe te voegen, de benodigde stijlen op je elementen kunt toepassen.
Bijvoorbeeld:
<button class="bg-green-600 text-white px-4 py-2 rounded">Green button</button>
Het button-element krijgt een groene achtergrond met witte tekst. Het bevat ook padding en afgeronde hoeken.
Terug naar het project
Voeg nog een element toe aan onze app met Tailwind-styling. Kopieer het onderstaande div-element en plak het boven het p-element in het bestand app/page.tsx.
Sla de wijzigingen op nadat je ze hebt aangebracht en controleer de live pagina. Je zou nu een witte cirkelvorm moeten zien.
In de praktijk
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
What does the `h-10 w-10 rounded-full bg-white` class combination do?
Can you explain how to use Tailwind classes for other shapes or colors?
Where should I place the new `div` in the `app/page.tsx` file?
Awesome!
Completion rate improved to 2.08Tailwind CSS Gebruiken voor Styling
Veeg om het menu te tonen
Tailwind CSS is een CSS-framework dat een verzameling laag-niveau utility-klassen biedt. Deze klassen kunnen direct aan je markup worden toegevoegd om ontwerpen te maken zonder CSS-code vanaf nul te schrijven. Het belangrijkste idee achter Tailwind is dat je door simpelweg de juiste set klassen toe te voegen, de benodigde stijlen op je elementen kunt toepassen.
Bijvoorbeeld:
<button class="bg-green-600 text-white px-4 py-2 rounded">Green button</button>
Het button-element krijgt een groene achtergrond met witte tekst. Het bevat ook padding en afgeronde hoeken.
Terug naar het project
Voeg nog een element toe aan onze app met Tailwind-styling. Kopieer het onderstaande div-element en plak het boven het p-element in het bestand app/page.tsx.
Sla de wijzigingen op nadat je ze hebt aangebracht en controleer de live pagina. Je zou nu een witte cirkelvorm moeten zien.
In de praktijk
Bedankt voor je feedback!
