Write HTML with Tailwind CSS classes and see styled output instantly with the full utility library.
This tool renders the HTML you write in an editor pane as a live styled preview, with Tailwind's complete utility library attached to the preview document. Every core class - spacing, colors, typography, layout, plus responsive and state variants such as md: and hover: - is available, so the output matches a page built with the framework's default theme. The usual surprise: the playground ships the full library, while a real project generates only the classes its content scan discovers. A class that renders here can be missing from your production CSS, and custom theme values from your project's config do not resolve.
A concrete input and expected output from the current implementation.
Input
<div class="bg-blue-500 p-4 rounded-lg text-white font-bold">Hello</div>
Expected output
A rendered box: blue background (#3b82f6), bold white text reading "Hello", 16px of padding on all sides, corners rounded at 8px. The tool returns the live styled preview of the pasted HTML, not rewritten code.
Each utility resolves to one rule in the bundled Tailwind stylesheet: bg-blue-500 is the blue-500 swatch, p-4 is padding: 1rem (16px), rounded-lg is border-radius: 0.5rem (8px), text-white sets the text color, and font-bold sets weight 700. Because the classes are plain HTML attributes, the same snippet renders identically in a project once Tailwind is installed.
The utility rules are already present in the preview document, so values match the framework's documented defaults: p-4 is 16px of padding, bg-blue-500 is the blue-500 swatch, rounded-lg is an 8px corner radius. There is no build step and no external stylesheet to add, which is why classes render the moment the HTML is entered.
Responsive and state variants come from the same stylesheet. md:flex applies display: flex only at the md breakpoint (768px and wider), hover:bg-gray-100 repaints the background while the cursor is over the element, and sm:, lg:, and xl: behave at their documented widths. Because variants are media queries and pseudo-class rules, you test them by resizing the preview or interacting with the rendered element, not by changing markup.
Yes. Responsive variants are part of the bundled stylesheet, so md:grid-cols-2 behaves as documented: two columns at 768px and wider, a single column below. Resize the preview pane or browser window to watch the breakpoint take effect. Base rules always apply first, with variants layered on top, matching how the framework behaves in a project.
The markup is portable - it is standard HTML plus Tailwind classes - but it renders in your project only if Tailwind is installed there and configured to scan the file that contains it. Classes outside the scanned content are purged from the generated CSS, so markup that renders here can silently lose styling in production. Copy the HTML, check your content configuration, and rebuild.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.