Playground

Type shorthand HTML on the left. The middle pane shows the expanded Tailwind output. The right pane renders it.

Input ≈ 53 tokens

Output ≈ 137 tokens

61% smaller

Shorthand

Expanded

<div class="rounded-lg border border-border bg-card text-card-foreground p-4 shadow-md">
  <h3 class="text-lg font-semibold">Greetings</h3>
  <p class="mt-2 text-muted-foreground">Type shorthand on the left.</p>
  <button class="inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 mt-4">Try it</button>
</div>

Rendered