Tailwind CSS Live Editor

Why I built yet another Tailwind CSS playground

Most of my “does this actually look right?” moments happen outside a project. A snippet from the docs, a component a teammate dropped in Slack, a class string in a pull request that I want to see before I approve it. Spinning up Vite for a twelve-line button is silly, and the online sandboxes I tried were either heavy, slow to boot, or wanted me to think about files and configs when all I had was markup.

So this is the smallest thing that does the job: one textarea, one preview, about 150 ms of debounce between them. It opens with something useful on screen, it remembers what you typed, and every button on it exists because I reached for that exact thing more than once.

The real compiler, not a lookalike

The preview is a sandboxed iframe running Tailwind's official browser build, @tailwindcss/browser v4. It scans the markup, generates CSS for exactly the classes you used, and recompiles whenever something changes. So the stuff that trips up regex-based “Tailwind previewers” just works: arbitrary values like grid-cols-[1fr_2fr], stacked variants like md:hover:bg-sky-600, group-hover:, peer-checked:, opacity modifiers, the lot. If it renders here, it renders in a v4 project with the default theme.

I self-host the compiler instead of hot-linking a CDN, so rendering your preview doesn't make a single third-party request. The frame is sandboxed without same-origin access, which means whatever you paste can't reach this page, your cookies, or anything else.

Testing breakpoints and dark mode

Tailwind's breakpoints are media queries, and inside the preview they respond to the frame's width, not your monitor's. That's the whole point of the width toggle. 375 shows your base, mobile-first styles. 768 crosses sm: and md:. 1280 gets you through lg: and xl:, scaled down to fit the column, so you see a real desktop layout instead of a squashed one. Fit uses whatever room the column has.

The Dark surface puts a dark class on the frame's root and switches the dark: variant to class mode, so dark:bg-slate-900 kicks in the moment you flip the toggle, whatever your OS is set to. If your project uses the default media-query strategy, the classes you copy out are identical — only the trigger differs.

Saving and sharing without a database

Everything you type autosaves to this browser's local storage, so a refresh or an accidentally closed tab doesn't eat your work. Copy link packs the whole snippet into the URL after the #. Browsers never send that part to a server, so a share link is the snippet rather than a pointer into a database I'd have to keep alive forever. The tradeoff is that a big snippet makes a long URL. For a component, that's fine.

A trick most people miss: custom theme tokens

Put a <style type="text/tailwindcss"> block anywhere in your snippet and the compiler reads it like your project's main stylesheet. Declare an @theme with --color-brand: #ff5a1f; and bg-brand, text-brand/70 and ring-brand start working immediately. It's the fastest way I know to check how a brand color holds up across a component before it goes anywhere near the real config.

What it won't do, on purpose

• Scripts don't run. Markup goes in through innerHTML, which never executes <script> tags. To preview an open dropdown or modal, render its open state with classes, or reach for the CSS-only peer and group patterns.
• It speaks v4. Most v3 markup renders fine, but a few utilities moved. v3 shadow is v4 shadow-sm, bg-opacity-50 is gone in favor of bg-black/50, and a bare ring is now 1px instead of 3px. The shadow generator and gradient generator print both syntaxes if you need to translate.
• It's a sandbox, not a build tool. The browser compiler works on every page load, which is perfect here and wrong for a production site. When it looks right, copy the HTML into your project and let the Tailwind CLI or the Vite plugin do the real build.