Tailwind CSS Playground Guide: Test Tailwind Classes Live (2026)

• Learn fast — Tailwind has 1,000+ utilities. Browse and experiment in seconds.
• No install — Skip npx tailwindcss init and config.
• Test combinations — Verify flex justify-between items-center behaves as expected.
• Prototype components — Build before integrating in your project.
• Share snippets — Send a URL or copy HTML for tutorials.

Card

<div class="rounded-2xl bg-white p-6 shadow-md hover:shadow-lg transition">
  <h3 class="text-lg font-semibold">Title</h3>
  <p class="mt-2 text-slate-600">Description</p>
</div>

Button

<button class="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 active:bg-blue-800">
  Click Me
</button>

Centered flex

<div class="flex min-h-screen items-center justify-center">
  Centered content
</div>

3-column responsive grid

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
  <div>1</div><div>2</div><div>3</div>
</div>

• JIT vs static lists — Dynamic class strings (bg-{color}-500) won't work; Tailwind needs full class names in source.
• Specificity — Later utilities override earlier ones. Order matters when combining p-4 and px-2.
• Arbitrary values — Use w-[345px] for non-standard sizes.
• Group hover — Add group to parent and group-hover: on child.
• Dark mode — Need darkMode: 'class' in config and class="dark" on html/body for class-based dark mode.

• Use the playground to discover classes; commit them to your project files.
• Compose utilities with @apply only sparingly — defeats Tailwind's purpose.
• Build component variants with cva or similar libraries for reusability.
• Use Prettier with prettier-plugin-tailwindcss to auto-sort class names.
• Stick to the default scale; arbitrary values are an escape hatch, not a habit.