Back to Playgrounds
🎨
Tailwind CSS Playground
Learn Tailwind CSS through interactive examples. Build beautiful UIs with utility classes.
Utility Classes
Invalid classes detected:
text-white, font-bold, text-lg
Unified Palette
Components & Showcases
Quick Reference
Spacing
p-4, m-2, px-6, py-3, gap-4
Colors
bg-purple-500, text-white, border-slate-700
Effects
rounded-lg, shadow-xl, hover:opacity-90
Responsive
md:grid-cols-2, lg:text-xl
Live Preview
Hello Tailwind!
Generated Code
<div
className=
"px-8 py-4 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-xl font-bold text-lg shadow-lg hover:shadow-xl transition-all"
>
Hello Tailwind!
</div>
💡 Tip: Copy the code above and use it in your React/Next.js components!