One <script> tag, zero build — Tailwind v4 Play CDN
The page CHROME (this header, these panels) is our own dark CSS.
Everything inside the bordered stage boxes below is styled
only by Tailwind utility classes — that is the whole lesson.
The CDN script in
<head> compiles the classes it finds in the DOM at runtime.
<!-- v4 Play CDN — verified, jsDelivr @tailwindcss/browser@4 -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
Old v3 used https://cdn.tailwindcss.com. v4 moved to the @tailwindcss/browser package.
A card built from utilities (no custom CSS)
utility-first
Ship UI fast
This card's radius, color, spacing, gradient, shadow and typography
are each a single-purpose utility class composed in the markup.
No .card in a stylesheet.
centered by utilities
<!-- the card's classes -->
<div class="max-w-sm mx-auto rounded-2xl bg-slate-800/60 border border-slate-700 shadow-xl overflow-hidden">
<div class="bg-gradient-to-r from-indigo-500 to-fuchsia-500 p-5"> ... </div>
<div class="p-5"> ... </div>
</div>
measuring applied styles…
Compose live — flip utilities, watch the cascade
Click to add/remove utility classes. The CDN watches the DOM (MutationObserver)
and recompiles on the fly — proof that each class is one CSS declaration.
watch me change
flex flex-col items-center justify-center gap-2
display: — · justify-content: — · border-radius: —
Toggling one class changes exactly one CSS property. That is utility-first.