The fastest way to experiment is the Play CDN.

<!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>

Save this as index.html and open it in a browser. Change one utility, reload, and inspect the generated rule. This is useful for learning because there is no project setup between an idea and the result.

You can also try Tailwind’s CSS features in the page:

<style type="text/tailwindcss">
  @theme {
    --color-brand: #2457d6;
  }
</style>

<button class="bg-brand px-4 py-2 text-white">Save</button>

The Play CDN runs Tailwind in the browser. Tailwind’s documentation limits it to development and experiments; it is not a production delivery strategy. It adds runtime work, depends on a remote script, and does not give you the controlled static CSS artifact produced by a normal build.

A production integration scans known sources during development/build and emits CSS ahead of time. The finished page loads that CSS without needing Tailwind itself in the browser.

Even in a quick experiment, keep real HTML semantics. Use a <button> for an action, a real heading for structure, and visible keyboard focus. Fast styling should not turn into inaccessible markup.

Your action is to build a heading, paragraph, and button in one Play CDN file. Add a custom brand token, test keyboard focus, inspect one generated rule, then list what must change before shipping the page.

Try Tailwind in the browser

Take this course offline