Tailwind CSS Playground

Try Tailwind CSS classes and see the page live, with the generated CSS, a dark mode switch and a zip download.

Auto-runPreview in dark modeLet the preview use the internetPreview size

<h1 class="mt-1 text-3xl font-bold text-slate-900 dark:text-white">$12 <span class="text-base font-normal text-slate-500">/ month</span></h1>

<li>Unlimited projects</li>

<li>Priority support</li>

<li>Private sharing</li>

</ul>

Choose plan

</button>

</div>

PreviewReady in 29 ms

Generated CSS

/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */

@layer properties;

@layer theme, base, components, utilities;

@layer theme {

:root, :host {

--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial,

sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',

monospace;

--color-slate-100: oklch(96.8% 0.007 247.896);

--color-slate-300: oklch(86.9% 0.022 252.894);

--color-slate-500: oklch(55.4% 0.046 257.417);

--color-slate-600: oklch(44.6% 0.043 257.281);

--color-slate-800: oklch(27.9% 0.041 260.031);

--color-slate-900: oklch(20.8% 0.042 265.755);

--color-white: #fff;

--spacing: 0.25rem;

--container-sm: 24rem;

--text-sm: 0.875rem;

--text-sm--line-height: calc(1.25 / 0.875);

--text-base: 1rem;

--text-base--line-height: calc(1.5 / 1);

--text-3xl: 1.875rem;

--text-3xl--line-height: calc(2.25 / 1.875);

--font-weight-normal: 400;

--font-weight-semibold: 600;

--font-weight-bold: 700;

--tracking-wide: 0.025em;

--radius-lg: 0.5rem;

--radius-2xl: 1rem;

--default-transition-duration: 150ms;

--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

--default-font-family: var(--font-sans);

--default-mono-font-family: var(--font-mono);

--color-brand: #0369a1;

}

@layer base {

Shortcuts: Ctrl+Enter run · / search (use ⌘ on Mac)

Free Online Tailwind CSS Playground

Try Tailwind classes and see the page. Type HTML with Tailwind classes, and the preview shows it at once, next to the exact CSS Tailwind generated for it. Add your own colours in a theme block, test dark mode with a switch, and download your page. Nothing you write is uploaded. Use it to find out what a class really does, to try a layout before adding it to a project, or to copy the CSS Tailwind generates for a few classes.

How to use the Tailwind playground

Edit index.html and add classes such as p-4, text-red-500 or md:flex. The preview updates as you type.
Read the Generated CSS under the preview to see what each class turned into, and use Copy to take it.
Open styles.css to add your own design values inside @theme { }, or to write @apply rules.
Switch on Preview in dark mode to test your dark: classes, and choose a preview size to test sm:, md: and lg: classes.
Open the ⋯ menu and choose Download all files (.zip) to keep the page.

Good to know

This playground has one page (index.html) and one stylesheet (styles.css), because Tailwind reads the classes of the page it is in. For plain CSS and scripts in several files, use the HTML/CSS/JS Playground. To tidy the stylesheet you write, try the CSS Beautifier.

Worked example

The sample is a pricing card that uses a custom brand colour from styles.css. In styles.css:

@theme {
  --color-brand: #0369a1;
}

In index.html the button uses it with bg-brand and a hover shade hover:bg-brand/90. Result: a white card with a blue button that darkens on hover, and in the Generated CSS box the rules for .bg-brand and .hover\:bg-brand\/90.

Common mistakes

Building a class name from pieces, such as class="text-${color}-500": Tailwind only finds whole class names written out in the page.
Expecting dark: classes to follow your computer setting: here they follow the dark mode switch.
Looking for a config file: use an @theme block in styles.css instead.
Loading an image from the web without switching the internet option on.

Frequently asked questions

Which version of Tailwind CSS is this?

Tailwind CSS 4, the version that reads your classes straight from the page. The same version is used every time, so a project looks the same when you open it later.

Where do I add my own colours and fonts?

In styles.css, inside an @theme block, for example @theme { --color-brand: #0369a1; }. A class such as bg-brand and text-brand then works in the page.

How do I try dark mode?

Use dark: classes in your HTML, such as dark:bg-slate-900, and switch on "Preview in dark mode". The playground applies a dark class to the page, so the dark: classes follow the switch instead of your computer setting.

What is the Generated CSS box?

It shows the CSS Tailwind wrote for the classes your page uses, so you can see exactly what each class does or copy the result. Classes you do not use are not included.

Can I use a plugin or a config file?

No. Tailwind runs as it comes, with the theme options you write in styles.css. There is no config file or plugin system in this playground.

Is my page uploaded anywhere?

No. The page is built and shown in your browser, in a sandboxed preview with no network access unless you switch the internet option on.

How is this different from the Tailwind website playground?

It runs entirely in your browser, with no account and no upload, and it keeps your page and stylesheet as a project you can save, share by link or download as one zip.

More Playground

HTML/CSS/JS PlaygroundWrite a web page and see it live JavaScript PlaygroundRun JavaScript and see the output TypeScript PlaygroundCheck TypeScript and run it React PlaygroundTry React components live Vue PlaygroundTry Vue components live Svelte PlaygroundTry Svelte components live SQLite PlaygroundRun SQL on a small database Postgres PlaygroundRun PostgreSQL in your browser

View all Playground tools →