Why utilities
Try Tailwind in the browser
Use the Tailwind Play CDN for a quick experiment, while understanding why a real production project should use a build integration.
The fastest way to try Tailwind is the Play CDN. One script tag, no build step, no npm install.
Save this as index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="p-8">
<h1 class="text-3xl font-bold">Hello Tailwind</h1>
</body>
</html>Open it in a browser. You get a bold, large heading with padding around it. Now change text-3xl to text-5xl, reload, and the heading grows. Open DevTools, select the h1, and you’ll see the generated rule: font-size: var(--text-5xl). This tight loop is why I like the CDN for learning. There is nothing between an idea and the result.
Customizing the theme in the page
You can also use Tailwind’s CSS features right in the HTML, inside a special style block:
<style type="text/tailwindcss">
@theme {
--color-brand: #2457d6;
}
</style>
<button class="bg-brand px-4 py-2 text-white">Save</button>The @theme block defines a color token, and bg-brand becomes available right away. The type="text/tailwindcss" attribute tells the CDN script to process this block.
Why this is not for production
The Play CDN runs the Tailwind compiler inside the browser, on every page load. Tailwind’s own documentation limits it to development and experiments. It adds runtime work, depends on a remote script being reachable, and never gives you a static CSS file you control.
A real build integration does the opposite. It scans your source files during development or build, generates the CSS ahead of time, and the finished page loads a normal stylesheet. Tailwind itself never ships to the visitor. We’ll set that up in the next lesson.
Keep the HTML honest
Even in a five-minute experiment, use real HTML. A <button> for an action, a real heading for structure, visible focus when you press Tab. Fast styling is not an excuse for inaccessible markup, and the habits you build in throwaway files follow you into real projects.
Try this: build a heading, a paragraph, and a button in one Play CDN file. Add a custom brand token, press Tab to check focus, inspect one generated rule, then write down what you would need to change before shipping this page.
Lesson completed