Tailwind Speeltuin
Test en bekijk Tailwind CSS-klassen in realtime.
Instellingen
Configureer elementtype en inhoud
Voorbeeldinstellingen
Snel veelgebruikte stijlcombinaties toepassen
Button
Card
Badge
Alert
Input
Voorbeeld
Bekijk het in realtime gestileerde resultaat
Hallo, Tailwind!
Gegenereerde HTML
HTML-code gegenereerd met huidige instellingen
<div className="bg-blue-500 text-white p-4 rounded-lg shadow-md hover:bg-blue-600 transition-colors">Hallo, Tailwind!</div>
💡 Gebruikstips
Veelvoorkomende klassen:
- •
hover:- Hover-statusstijlen - •
focus:- Focus-statusstijlen - •
active:- Actieve statusstijlen - •
transition-colors- Kleurtransitie-effecten
Responsieve klassen:
- •
sm:- 640px en hoger - •
md:- 768px en hoger - •
lg:- 1024px en hoger - •
xl:- 1280px en hoger