Tailwind Playground
Prueba y previsualiza clases de Tailwind CSS en tiempo real.
Configuración
Configura el tipo de elemento y el contenido
Ejemplos Preestablecidos
Aplica rápidamente combinaciones de estilos de uso común
Button
Card
Badge
Alert
Input
Vista Previa
Ver el resultado estilizado en tiempo real
¡Hola, Tailwind!
HTML Generado
Código HTML generado con la configuración actual
<div className="bg-blue-500 text-white p-4 rounded-lg shadow-md hover:bg-blue-600 transition-colors">¡Hola, Tailwind!</div>
💡 Consejos de Uso
Clases Comunes:
- •
hover:- Estilos de estado de hover - •
focus:- Estilos de estado de foco - •
active:- Estilos de estado activo - •
transition-colors- Efectos de transición de color
Clases Responsivas:
- •
sm:- 640px y más - •
md:- 768px y más - •
lg:- 1024px y más - •
xl:- 1280px y más