Tailwind-Spielplatz
Testen und Vorschau von Tailwind-CSS-Klassen in Echtzeit.
Einstellungen
Konfigurieren Sie Elementtyp und Inhalt
Beispielvoreinstellungen
Wenden Sie schnell häufig verwendete Stilkombinationen an
Button
Card
Badge
Alert
Input
Vorschau
Sehen Sie das in Echtzeit gestaltete Ergebnis
Hallo, Tailwind!
Generiertes HTML
HTML-Code, der mit den aktuellen Einstellungen generiert wurde
<div className="bg-blue-500 text-white p-4 rounded-lg shadow-md hover:bg-blue-600 transition-colors">Hallo, Tailwind!</div>
💡 Verwendungstipps
Häufige Klassen:
- •
hover:- Hover-Zustandsstile - •
focus:- Fokus-Zustandsstile - •
active:- Aktive Zustandsstile - •
transition-colors- Farbübergangseffekte
Responsive Klassen:
- •
sm:- 640px und höher - •
md:- 768px und höher - •
lg:- 1024px und höher - •
xl:- 1280px und höher