Tailwind Playground
Test and preview Tailwind CSS classes in real-time.
Settings
Configure element type and content
Preset Examples
Quickly apply commonly used style combinations
ButtonCardBadgeAlertInput
Preview
See the real-time styled result
Hello, Tailwind!
Generated HTML
HTML code generated with current settings
<div className="bg-blue-500 text-white p-4 rounded-lg shadow-md hover:bg-blue-600 transition-colors">Hello, Tailwind!</div>
💡 Usage Tips
Common Classes:
- •
hover:- Hover state styles - •
focus:- Focus state styles - •
active:- Active state styles - •
transition-colors- Color transition effects
Responsive Classes:
- •
sm:- 640px and up - •
md:- 768px and up - •
lg:- 1024px and up - •
xl:- 1280px and up