Tailwind CSS CDN Installation

The Tailwind Play CDN lets you try Tailwind CSS in a single HTML file with no build step. This lesson shows how to use it, and explains why it's meant for prototypes and learning rather than production.

What Is the Tailwind CDN Build?

The Tailwind Play CDN is a script that compiles Tailwind classes in the browser, on the fly, as soon as the page loads. You add one <script> tag and every Tailwind utility becomes usable immediately, without npm, Node, or a config file.

This makes it perfect for quick demos, CodePen-style experiments, and teaching, but it recompiles CSS on every page load and can't be customized with a real configuration file, so it is explicitly not recommended for production sites.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold text-blue-600">Hello, Tailwind!</h1>
</body>
</html>

As soon as the script tag loads, every Tailwind class used anywhere on the page is compiled in the browser.

Adding the CDN Script

<script src="https://cdn.tailwindcss.com"></script>

Place the script tag inside <head>, before any elements that use Tailwind classes render.
No build tool, npm install, or configuration file is required.
You can still pass limited configuration through an inline tailwind.config object.
The CDN build is not tree-shaken, so it ships a much larger stylesheet than a compiled production build.

CDN Installation Cheatsheet

Everything you need to try Tailwind instantly in a browser.

Task	Snippet	Notes
Add Tailwind	`<script src="https://cdn.tailwindcss.com"></script>`	Enables every utility class immediately
Inline config	`<script>tailwind.config = { theme: {...} }</script>`	Must come after the CDN script tag
Dark mode class strategy	`tailwind.config = { darkMode: "class" }`	Enables `dark:` variants toggled by a class
Custom colors	`theme: { extend: { colors: { brand: "#1d4ed8" } } } }`	Adds a `bg-brand` style utility
Use in CodePen	Paste the script into the HTML head	Great for quick shareable demos
Production warning	Console warning in browser dev tools	Tailwind itself warns this is not for production
No purging	Full utility set is always compiled	Larger payload than a real build
No plugins	Play CDN plugin support is limited	Custom plugins usually require npm setup

When to Use the CDN Build

The CDN build shines any time you need Tailwind without a build step: quick demos, teaching materials, internal tools, or verifying a class name before wiring up a full project.

Prototyping a UI idea before setting up a real project.
Sharing a live example on CodePen, JSFiddle, or a support forum.
Testing whether a specific utility class produces the visual effect you expect.
Static, single-page internal tools where build tooling would be overkill.

Customizing the CDN Build

You can pass a limited theme configuration to the CDN build by defining a global tailwind.config object before the page renders. This lets you add custom colors or enable class-based dark mode without npm.

<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {
    darkMode: "class",
    theme: {
      extend: {
        colors: {
          brand: "#1d4ed8",
        },
      },
    },
  };
</script>

The configuration script must run after the CDN script tag so the tailwind global exists.

CDN Build vs npm Build

The CDN build recompiles Tailwind in the browser on every page load, has no tree-shaking, and cannot use most plugins. A real npm-based build compiles once, ships only the classes you use, and integrates fully with your framework's build pipeline.

Aspect	CDN Build	npm Build
Setup time	Seconds, one script tag	Minutes, requires Node and config
Production ready	No	Yes
Bundle size	Large, unoptimized	Small, tree-shaken
Custom plugins	Very limited	Fully supported
Best for	Demos and learning	Real applications

Common Mistakes

Shipping the CDN script tag to a production website, resulting in slow client-side compilation on every visit.
Placing the inline tailwind.config script before the CDN <script> tag, which causes the configuration to be ignored.
Assuming the CDN build supports the exact same plugin ecosystem as an npm install.
Forgetting that the CDN build recompiles on every page load, which adds latency to real users.
Using the CDN build for a client project without telling them it's meant to be temporary.

Key Takeaways

The Tailwind Play CDN lets you use Tailwind with a single script tag and no build step.
It compiles Tailwind classes live in the browser, which makes it unsuitable for production.
You can still pass a basic theme configuration through a global tailwind.config object.
The CDN build is ideal for demos, prototypes, and teaching examples.
Real projects should migrate to an npm-based setup as soon as they move past prototyping.

Pro Tip

Use the CDN build inside the official Tailwind Play (play.tailwindcss.com) when you want to quickly test an idea and share a link, without touching your own project at all.