Skip to main content

Tailwind CSS Playground

Write HTML with Tailwind CSS classes and see live results. Use it as an online Tailwind editor and Tailwind play environment.

Reviewed by · Last reviewed

Preview

Preview requires the Tailwind CDN (https://cdn.tailwindcss.com). If styles are missing, your network or a browser extension may be blocking external scripts.

How to Use the Tailwind CSS Playground

  1. Write HTML in the left editor. Every Tailwind utility class is live - typing flex items-center gap-4 rounded-2xl bg-indigo-500 text-white renders immediately.
  2. Read the live preview on the right. The preview is a sandboxed iframe so styles cannot leak out into the surrounding page.
  3. Toggle the layout between side-by-side (good on wide screens) and stacked (better on laptop screens or when you are previewing tall content).
  4. Click Copy HTML to send the current markup to your clipboard; paste it into any Tailwind-enabled project and it will style identically.
  5. Use Reset to restore the starter template when you want to begin a clean experiment.

How the Preview Actually Works

The right-hand pane is an <iframe> with a dynamically constructed srcdoc attribute. Each keystroke in the editor is debounced for 300 milliseconds and then used to build a full HTML document string that includes the official Tailwind CSS Play CDN script (cdn.tailwindcss.com) plus your markup as the body. The iframe is reloaded with the new srcdoc, the Play script evaluates, it scans the document for class attributes, and it injects a <style> element with only the utility rules that your markup actually references (this is the same just-in-time compilation the real Tailwind toolchain performs at build time). Because the iframe is its own document, your playground markup cannot access the parent window, and the Tailwind CDN script is isolated to just this tool\'s preview. The 300ms debounce is the standard "finished typing" heuristic, long enough to avoid a reload on every keystroke and short enough that the preview still feels live.

When to Pull Up the Online Tailwind Editor

  • Prototyping a component away from your main codebase, so you can iterate the markup without running a dev server.
  • Composing arbitrary-value utilities (grid-cols-[280px_1fr], bg-[#14b8a6]) and checking they parse correctly before pasting into production.
  • Testing dark-mode variants with dark: prefixes against your preferred base class set.
  • Debugging why a utility class does nothing - if it works in the playground but not your project, the problem is your Tailwind content config or build pipeline, not the class.
  • Writing an answer for a teammate or a Stack Overflow question where you need a paste-and-run reproducible example.

Edge Cases and Gotchas

First, the CDN uses the default Tailwind config. Your production project likely has a customized theme - utilities like bg-brand-500 will not work here. Use the equivalent default palette for exploration and swap to your brand token before pasting. Second, arbitrary values: w-[calc(100%-2rem)] works, but do not add spaces inside the brackets. Third, plugins are not loaded: typography\'s prose and similar plugin-sourced utilities are missing unless you add the plugin script. Fourth, the iframe rebuilds on each debounced keystroke, so any JavaScript state inside <script> tags resets on every edit. Fifth, responsive breakpoints use the iframe\'s width, not a phone width - use the stacked layout toggle to simulate narrower screens.

About Tailwind Itself

Tailwind CSS is a utility-first CSS framework that ships atomic classes (flex, mt-4, text-xl) and a build-time compiler that tree-shakes the stylesheet down to just the classes actually referenced in your templates. It differs from Bootstrap or Bulma in being style-agnostic at the component level: there is no pre-styled .btn, only primitives you compose. Since v3 (2021) the JIT engine generates utilities on-demand including arbitrary values, and since v3.3 the @layer and @apply directives are first-class. The Play CDN is a browser build of the same JIT engine, which is why every utility in the v3 documentation works here. Underneath, Tailwind emits vanilla CSS - the resulting stylesheet is just CSS Custom Properties, Cascade Layers (CSS Cascading and Inheritance Level 5), Flexbox, Grid, and the modern Color Module. There is nothing proprietary about the output, which is what lets you ship a zero-framework page and still have styles from a class-authoring vocabulary.

Comparison to Alternatives

The official play.tailwindcss.com is more capable - it supports a custom tailwind.config.js, plugin imports, and shareable URLs that encode the entire playground state. Use it when you need custom theme values or long-lived share links. CodeSandbox and StackBlitz boot a full Vite + Tailwind project in a few seconds and let you test plugins properly but are slower to load than this tool. The browser-native approach - a local HTML file with the Play CDN script - is a viable offline alternative. Pick this playground when you want zero-setup exploration of standard Tailwind utilities; pick the official Play when you need custom config; pick a real sandbox when you need to bundle a plugin or test a TypeScript integration.

Frequently Asked Questions

Is this the same as play.tailwindcss.com?

It is the same underlying Play CDN and therefore the same utility set, but the wrapper is different. The official Play supports a custom <code>tailwind.config.js</code> tab, official plugin auto-loading, and permalink sharing. This playground is simpler and more opinionated - it is ideal for quick experiments, but if you need to model a production project with custom theme colors or plugins like <code>@tailwindcss/forms</code>, you will hit its limits.

Why is there a 300 millisecond delay before the preview updates?

The editor input is debounced so that rebuilding the iframe - parsing new srcdoc, booting the Tailwind Play engine, and scanning the markup for utility classes - only happens after you pause typing. Without the debounce, every keystroke would trigger a full iframe reload, which is both visually jarring and much slower in aggregate than batching. 300ms is the common "end of word" threshold and feels near-instant.

Can I use dark mode variants?

Yes. The <code>dark:</code> variant works via the default <code>media</code> strategy, which reads the iframe's <code>prefers-color-scheme</code>. The iframe inherits the parent browser's preference, so flipping your OS or browser theme toggles the preview. To test explicitly, wrap your markup in a parent div with <code>class="dark"</code> and switch Tailwind to <code>class</code> strategy - but the Play CDN runs the default media strategy only, so for class-based testing you need the official Play playground.

Why do some classes not apply?

Three common causes. One: the class belongs to a plugin not loaded by the Play CDN. Two: the class was added in a newer Tailwind version than the CDN is pinned to. Three: you have a typo that stops the JIT engine from matching the pattern - the Play engine silently drops unmatched class names rather than warning. Open DevTools inside the iframe (right-click, Inspect) and check whether the class appears in the emitted stylesheet.

Are arbitrary value classes supported?

Yes. Square-bracket arbitrary values like <code>bg-[#14b8a6]</code>, <code>grid-cols-[280px_1fr]</code>, <code>w-[calc(100%-1rem)]</code> all work here because the JIT engine is the same one that ships in Tailwind v3 proper. One footnote: the brackets cannot contain spaces unless they are underscores (Tailwind treats <code>_</code> as a space inside arbitrary values), so <code>font-[Helvetica_Neue]</code> is the correct way to write a multi-word font family.

Can I include JavaScript?

You can put <code>&lt;script&gt;</code> tags in your markup and the iframe will execute them because the sandbox includes <code>allow-scripts</code>. However, any state you build up resets on every 300ms-debounced reload, so interactive demos lose their state every time you edit. For testing Alpine.js, htmx, or vanilla DOM scripts the playground is fine as long as you do not need persistent state between edits.

Can I use CSS variables or custom CSS?

Inline <code>&lt;style&gt;</code> tags work inside your markup, which is the cleanest way to add custom CSS variables or override utilities. Tailwind's own CSS is loaded first by the Play CDN, then your inline style cascades on top. For one-off arbitrary-value utilities that reference a variable, use the <code>bg-[var(--my-color)]</code> pattern - this is a v3 feature and works in the playground.

Is my HTML uploaded?

No. The editor and preview both live in the browser - the parent page is a Preact component holding the HTML string in React state, and the iframe is built from a <code>srcdoc</code> constructed in-memory. The only external request the iframe makes is to the Tailwind CDN script. Your markup is not logged, not beaconed, and not shared.

Does this work offline?

Partially. The playground shell loads and the editor works, but the iframe preview needs the Tailwind Play CDN script to evaluate utility classes. Without network access the iframe renders your HTML as plain unstyled content. If you need an offline setup, copy the Play CDN script to your own asset directory and host it locally.

Why is responsive breakpoint behavior different from production?

Tailwind's <code>sm:</code>, <code>md:</code>, and <code>lg:</code> utilities match the preview iframe's width, which is the width of the right-hand pane - typically 400 to 900 pixels. On a wide monitor the preview is already into the <code>lg</code> range, so <code>sm:</code> variants will not activate the way they would on a phone. Use the stacked layout toggle to shrink the preview width when testing mobile-first styles, or open DevTools and use the device emulator on the iframe.

Is this a Tailwind play / online Tailwind editor?

Yes. "Tailwind play", "tailwind playground", "online tailwind editor" and "tailwind css playground" all describe the same kind of tool: a browser window that hot-reloads Tailwind utility classes as you type. This page ships the Tailwind Play CDN engine inside a sandboxed iframe, so every official utility from Tailwind v3 - including arbitrary values and <code>dark:</code> variants - works without any local install. If you need plugins or a custom <code>tailwind.config.js</code>, the official play.tailwindcss.com is the next step up; for layout-specific experiments see our <a href="/tools/flexbox-playground/">flexbox playground</a> or <a href="/tools/css-grid-generator/">CSS grid generator</a>.

More Developer Tools

Base64 Encoder & Decoder

Encode UTF-8 text to Base64 online or decode Base64 back to UTF-8 and plain text. Runs in your browser with no upload.

Open tool

Bulk URL Encode / Decode

Encode or decode many URLs at once. Paste a newline-separated list and the tool processes each line in parallel, preserving order and blank lines.

Open tool

Code Screenshot

Create beautiful code snippet images with customizable themes.

Open tool

Color Converter

Convert colors between HEX, RGB, HSL and CMYK formats.

Open tool

Cron Expression Parser

Parse cron expressions into human-readable schedules with next run times.

Open tool

CSS Formatter / Minifier

Format, beautify and minify CSS code.

Open tool