Plac zabaw Tailwind
Testuj i podglądaj klasy CSS Tailwind w czasie rzeczywistym.
Ustawienia
Skonfiguruj typ elementu i zawartość
Przykłady predefiniowane
Szybko zastosuj często używane kombinacje stylów
Button
Card
Badge
Alert
Input
Podgląd
Zobacz wynik stylizowany w czasie rzeczywistym
Witaj, Tailwind!
Wygenerowany HTML
Kod HTML wygenerowany z bieżącymi ustawieniami
<div className="bg-blue-500 text-white p-4 rounded-lg shadow-md hover:bg-blue-600 transition-colors">Witaj, Tailwind!</div>
💡 Wskazówki dotyczące użytkowania
Typowe klasy:
- •
hover:- Style stanu najechania kursorem - •
focus:- Style stanu fokusu - •
active:- Style stanu aktywnego - •
transition-colors- Efekty przejścia kolorów
Klasy responsywne:
- •
sm:- 640px i więcej - •
md:- 768px i więcej - •
lg:- 1024px i więcej - •
xl:- 1280px i więcej