Tailwind CSS playground

Tailwind CSS styles a page with small single-purpose classes — p-4, text-sm, md:grid-cols-3, hover:bg-sky-600 — and generates exactly the CSS those classes need. This page runs Tailwind itself (its in-browser build, version 4.3.3) on whatever HTML you write, so the preview is what Tailwind really produces, and the inspector shows you that CSS class by class.

For CSS by hand — gradients, shadows, flexbox and grid settings, clamp() — see the CSS playground.

How to use it

Examples load with one click: a card, a navbar that collapses below md, a form with validation states, a pricing table that goes from one column to three, a dashboard grid, and a hero with gradient text. I wrote them for this page; edit them freely.

HTML is what goes inside <body>. The preview updates as you type.

Theme & CSS is the stylesheet Tailwind reads (<style type="text/tailwindcss">): add colours, fonts, radii and breakpoints in @theme and they become utilities (--color-brand-500 gives bg-brand-500, text-brand-500, ring-brand-500/30 …), define your own with @utility and @apply, and change variants with @custom-variant. The default sets up a brand colour, a display font, a card radius and a btn utility, all used by the examples.

◐ Dark puts the dark class on <html>. The default theme makes Tailwind’s dark: variant follow that class; delete the @custom-variant dark line and it follows your system setting instead, which is Tailwind’s default.

Widths show the page at phone width (390px) or exactly at Tailwind’s breakpoints — sm 640px, md 768px, lg 1024px, xl 1280px — scaled down to fit if your screen is smaller. The strip under the preview shows which breakpoint variants are active.

⌖ Inspect: turn it on and click anything in the preview. Each class on that element is explained — its variants (md: = at 48rem / 768px and wider, hover:, dark:, group-hover:, peer-invalid: …), what the utility does and what its value means (p-4 is 4 × 0.25rem = 1rem; w-1/2 is 50%; bg-sky-500/50 is half-transparent) — and under it the CSS rule Tailwind generated for it, with the media queries around it and the theme variables filled in. You can also type classes into the box to explain them without putting them in the page.

Export saves an HTML page that loads Tailwind from the CDN (one file, compiles in the browser — fine for a prototype), or the CSS Tailwind generated for the classes on the page, inlined or as styles.css with an index.html that links it. The compiled CSS only contains the classes in use when you export. For a real project, install Tailwind and build with its CLI or a bundler plugin.

Share link (at the top) puts the HTML, the theme, the width and dark mode into the link.

Browser support

Any current browser: Chrome, Edge, Firefox and Safari. Tailwind 4 relies on modern CSS (cascade layers, @property, color-mix()), so the preview needs Safari 16.4+, Chrome 111+ or Firefox 128+ — the same as a site built with Tailwind 4.

Privacy

The Tailwind browser build (about 280 KB) is loaded from cdn.jsdelivr.net into the preview each time it opens; nothing you type is sent anywhere. The preview runs in a sandboxed frame with no access to this site. Your HTML and theme are kept in this browser’s storage, and go into a link only if you share one.