Tailwind Playground

Write HTML with Tailwind CSS classes and see the live result. Auto-updates as you type.

Quick Reference — Common Tailwind Classes

Layout

flex, grid, block, hidden

items-center, justify-between

gap-4, p-4, m-4, mx-auto

w-full, h-screen, max-w-xl

Typography

text-sm, text-lg, text-2xl

font-bold, font-medium

text-gray-500, text-blue-600

leading-relaxed, tracking-wide

Styling

bg-white, bg-gray-100

rounded-lg, rounded-full

shadow-md, border, border-gray-200

hover:bg-blue-700, transition

${editor.value} `; preview.srcdoc = html; } function loadExample() { editor.value = defaultExample; updatePreview(); } // Load example on first visit editor.value = defaultExample; updatePreview();