Tailwind via CDN
Definition
Tailwind CSS is normally compiled: a build scans your templates, finds the utility classes you actually used, and emits a small stylesheet containing only those. Loading it from a CDN skips that entirely. One script tag pulls in a browser build that reads the class attributes on the page at runtime and generates the matching CSS on the fly, or in the older play-CDN style injects a large prebuilt sheet. This is why almost every page a chat assistant produces uses it — the assistant cannot run a build step, and the output has to work the moment it is opened. Tailwind's own documentation describes the CDN build as a development convenience, not a production recommendation, and the exact script URL has changed between major versions.
Why It Matters
The trade is convenience against weight and control. A compiled Tailwind sheet for a small page is often 8 to 15 KB after compression; the CDN runtime is several hundred kilobytes of JavaScript that must download, parse and run before the page looks right. On a slow connection that shows as a flash of unstyled content. You also take on a runtime dependency on somebody else's server: if that CDN is blocked by a corporate proxy or has a bad day, your page loads as raw text. For a prototype or an internal demo that is a fair price. For a landing page that people will judge you by, it is worth spending twenty minutes on a real build.
How It Works
The page includes a script tag pointing at a CDN such as cdn.tailwindcss.com or a versioned path on jsdelivr or unpkg. The browser fetches it, the script walks the DOM, collects every utility class it finds, and writes the corresponding rules into a style element it adds to the document head. Because generation happens after the HTML parses, styles land slightly late. Customising theme colours means assigning to a tailwind.config object in an inline script before the classes are read, rather than editing a config file. There is no purge and no tree-shaking, so you pay for the whole engine whether the page uses five utilities or five hundred. A static host like 99helpers serves the HTML unchanged and never sees the CDN request — that goes straight from the visitor's browser to the CDN.
Real-World Example
A founder publishes a pricing page built in a chat window at seed-pricing.99helpers.site. The file is 14 KB, but the Tailwind CDN script adds roughly 300 KB and the layout snaps into place about half a second after the text appears. Replacing the script with a compiled stylesheet, generated once and uploaded next to the HTML, drops total transfer under 30 KB and removes the flash. Version history on 99helpers means the old file is one click away if the new stylesheet misses a class.
Common Mistakes
- ✕Shipping the CDN build to real customers — it is several hundred kilobytes and Tailwind documents it as a development tool
- ✕Setting a custom theme after the script tag rather than before it, so the config is read too late and the defaults win
- ✕Assuming the classes will keep working forever — a CDN URL can move between major versions and an unpinned reference breaks quietly
- ✕Pairing it with hand-written CSS that fights the utilities, then blaming specificity when the two disagree
Related Terms
React via CDN
Running React by loading it from script tags on a public CDN rather than installing it and bundling it. It lets a single HTML file render a React app with no npm, no bundler and no compile step.
Inline CSS
CSS written inside the HTML document rather than in a separate .css file — either in a style element in the head or in a style attribute on a single element. It removes a network request and keeps everything in one file.
Single-File Web App
A single-file web app is a complete, working application contained in one HTML document, with the styles and the JavaScript written inside the same file. Open it in a browser and it runs — there is nothing to install and nothing to build.
CDN
A content delivery network: a set of servers spread across the world that keep copies of your files and answer each visitor from somewhere close to them. It is the service; the machines it runs on are its edge network.
Build Step
A build step is the command that turns source files into the folder a web server can actually serve. It runs before publishing, produces an output folder, and is not part of the live site.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →