Playground do Tailwind
Teste e visualize as classes CSS do Tailwind em tempo real.
Configurações
Configure o tipo e o conteúdo do elemento
Exemplos Predefinidos
Aplique rapidamente combinações de estilos comumente usadas
Button
Card
Badge
Alert
Input
Visualizar
Veja o resultado estilizado em tempo real
Olá, Tailwind!
HTML Gerado
Código HTML gerado com as configurações atuais
<div className="bg-blue-500 text-white p-4 rounded-lg shadow-md hover:bg-blue-600 transition-colors">Olá, Tailwind!</div>
💡 Dicas de Uso
Classes Comuns:
- •
hover:- Estilos de estado de hover - •
focus:- Estilos de estado de foco - •
active:- Estilos de estado ativo - •
transition-colors- Efeitos de transição de cor
Classes Responsivas:
- •
sm:- 640px e acima - •
md:- 768px e acima - •
lg:- 1024px e acima - •
xl:- 1280px e acima