OpenWikitailwindlabs/tailwindcss

Play CDN

Purpose and Scope

The Play CDN is Tailwind CSS’s browser-only installation path for trying utility classes without setting up a build tool, PostCSS pipeline, or command-line watcher. The official documentation positions it as a development convenience: add the browser script to an HTML page, write Tailwind utility classes directly in markup, and see generated styles in the browser. It is explicitly not the production path, because normal Tailwind projects are designed to scan source files and write optimized static CSS during a build step rather than relying on runtime browser work.

This page explains the Play CDN model and how it differs from the repository’s build-tool playground workflow. The requested source file, playgrounds/vite/src/main.tsx, shows the Vite-style application entrypoint: React is mounted into an existing DOM node, and CSS is imported as part of the module graph. That is the opposite shape from the Play CDN quick-start, where an HTML file loads @tailwindcss/browser from a CDN and can include Tailwind-enabled CSS in a <style type="text/tailwindcss"> block. Sources: playgrounds/vite/src/main.tsx

Relevant Source Files

  • playgrounds/vite/src/main.tsx — demonstrates the repository’s Vite playground entrypoint, including a React root render and an imported ./index.css, which is useful context for understanding what the Play CDN path avoids during quick experiments.

Browser/CDN Usage Model

In the standard Tailwind model, the framework scans HTML, JavaScript components, and templates for class names, generates the matching CSS, and writes that CSS to a static output file. The Play CDN changes the ergonomics for experimentation: the browser receives a script from https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4, then the page can immediately use classes such as text-3xl, font-bold, underline, flex, grid, or hidden in markup. This gives learners a low-friction way to test utility-first styling before choosing a project integration.

The important boundary is production readiness. The official docs describe the Play CDN as development-only, while the repository’s playground source illustrates a build-tool application shape where CSS participates in the JavaScript module graph. In playgrounds/vite/src/main.tsx, the application imports ./index.css before rendering the React component tree into document.getElementById('app')!. That pattern lets Vite and the Tailwind integration own CSS transformation, dependency tracking, and hot updates instead of depending on a browser CDN script at runtime. Sources: playgrounds/vite/src/main.tsx

Minimal HTML Flow

A minimal Play CDN page starts with a normal HTML document, adds the browser package script in the <head>, and then uses utility classes in the body. This is useful for reproductions, demos, classroom examples, design spikes, and trying documentation examples. It is not meant to replace @tailwindcss/vite, @tailwindcss/postcss, or the CLI when the project needs predictable builds, source scanning, bundler integration, and optimized deployment assets.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">Hello world!</h1>
  </body>
</html>

Custom CSS is still possible in the Play CDN workflow. The official docs show type="text/tailwindcss" as the signal for CSS that should be processed with Tailwind features, including CSS-first customization such as @theme. For example, defining --color-clifford in an @theme block makes text-clifford available in the page. This keeps the experiment close to Tailwind v4’s CSS-first authoring model while avoiding a local project scaffold.

<style type="text/tailwindcss">
  @theme {
    --color-clifford: #da373d;
  }
</style>

System-to-Code Mapping

The repository source supplied for this page maps the Play CDN to the broader installation story by contrast. playgrounds/vite/src/main.tsx is not a CDN example; it is a Vite playground entrypoint. It imports React, imports the local App, imports ./index.css, and renders inside React.StrictMode. That file shows what a real application integration normally needs: an application module graph, a root DOM element, and CSS flowing through the project’s tooling rather than being discovered from a single standalone HTML file. Sources: playgrounds/vite/src/main.tsx

For developers deciding between installation paths, that distinction is practical. Choose the Play CDN when the task is to validate a utility class, share a small HTML reproduction, or explore Tailwind syntax without package installation. Choose the Vite path when the task is to build an application where React components, local CSS, and build-time Tailwind processing should evolve together. The Vite playground’s explicit import './index.css' is the clue: CSS is source code in the app, not a browser-side afterthought. Sources: playgrounds/vite/src/main.tsx

Implementation Notes and Constraints

The first-party browser runtime is published as @tailwindcss/browser and is loaded from the CDN in the official Play CDN instructions. In that workflow, the browser page itself is the project boundary: HTML, utility classes, and optional Tailwind CSS features live together in one document. That makes it excellent for short-lived experimentation, but it also means the page does not exercise the same operational path as repository playgrounds, integration tests, or framework builds.

Because the Play CDN is development-only, avoid using it as the long-term integration for production applications. When a prototype becomes a real project, move to a build path that matches the surrounding stack. For Vite applications, the next step is the Vite integration; for existing CSS pipelines, use PostCSS; for framework-specific projects, follow the framework guide; and for simple static builds, use the Tailwind CLI. The conceptual handoff is straightforward: keep the utility classes and custom CSS ideas, then let a build integration scan source files and emit CSS artifacts.

Next Steps

Use the Play CDN when you need the fastest possible Tailwind experiment: paste the script tag, add utility classes, and optionally add a text/tailwindcss style block for @theme customizations. Once the experiment needs source files, components, local CSS imports, or production deployment, switch to a build-backed installation path. The repository Vite playground entrypoint is a useful mental model for that transition because it shows CSS entering the application through a normal import before React renders the app. Sources: playgrounds/vite/src/main.tsx

Ask a question...