tailwind.landing Open editor

styling/tailwind

A Tailwind CSS Playground and Live Online Editor

Type a utility class and the official Tailwind browser engine generates exactly that CSS on the fly — a playground and online editor in one tab, with no build and nothing to install.

Open the Tailwind playground How the JIT works
engineTailwind JIT (browser)
classesgenerated on the fly
buildnone
configtailwind.config
index.html
<!-- CSS is generated live from these classes -->
<div class="mx-auto max-w-sm rounded-2xl bg-slate-900
            p-6 shadow-xl ring-1 ring-white/10">
  <h2 class="text-xl font-semibold text-sky-400">
    Ship faster
  </h2>
  <p class="mt-2 text-slate-300">No build step.</p>
  <button class="mt-4 rounded-lg bg-sky-500 px-4 py-2
                 text-white hover:bg-sky-400">
    Get started
  </button>
</div>
tailwind jit · utilities generated on save

01 platform

What Tailwind is like with no build step to configure

Tailwind's reputation for setup — PostCSS, a content array, a purge step — is about the toolchain, not the CSS. Take that away and it works as a quick playground, a full online IDE, or a sandbox for a multi-file project — the setup is gone, not the capability.

  • Utilities, generated on the fly

    Type flex, gap-4 or text-sky-400 and the official Tailwind browser engine generates exactly those rules the instant you save. You style by composing classes, not by writing a separate stylesheet.

  • No config, no content array

    There is no tailwind.config you must create and no content glob to keep in sync. The engine reads the markup you actually wrote, so only the utilities you used exist — the just-in-time model, with nothing to wire up.

  • The real engine, in the tab

    This is the same browser build that powers Tailwind Play, not a lookalike that ships a fixed stylesheet. Arbitrary values like bg-[#0f172a], variants and the full utility surface all resolve.

  • Private and installable

    The project lives in your browser, never on a server, and installs as a PWA — so a layout you are prototyping keeps working offline and stays yours.

02 deep dive

How utility classes appear without a PostCSS build

The thing that normally needs a build is the part that scans your files and generates CSS. In the browser, that runs as you type.

The engine reads your markup. Instead of a content array pointing at files, the browser engine watches the document you are editing and generates a rule for every utility it finds — so the generated CSS is always exactly the classes in use, nothing more.

Variants compose the way the docs say. md:, lg:, hover:, focus: and dark: all stack — md:hover:bg-sky-400 is one class that resolves to a real media-and-state rule, generated on demand like every other.

Arbitrary values fill the gaps. When the scale does not have what you need, w-[37ch] or bg-[#0f172a] produces the exact rule inline, so you are never forced out of utilities into a separate stylesheet for a one-off.

engine
official browser build
content
the live markup
variants
md: hover: dark: …
arbitrary
bg-[#0f172a]
variants.html
<button class="bg-slate-800 hover:bg-slate-700
               md:px-6 dark:bg-slate-100
               dark:text-slate-900">
  Responsive, stateful, themed — all utilities
</button>
one class, a media-and-state rule

03 pipeline

What happens when you type a class name

Four steps, all client-side, between a class in your markup and a rule in the preview. Knowing the order is what makes an unexpected style easy to trace.

  1. Scan

    The engine reads the markup and collects every class token in it, including the ones a framework template produced, so the set to generate is the set actually on the page.

  2. Match

    Each token is matched against Tailwind's utilities and your theme — text-sky-400 becomes a color rule, md: wraps it in a breakpoint, arbitrary values are parsed inline.

  3. Generate

    Only the matched utilities are turned into CSS. Nothing you did not use is emitted, which is the whole idea of the just-in-time engine, done without a build.

  4. Apply

    The generated stylesheet is injected into the preview and the page repaints. Change a class and the cycle repeats on save, so the loop stays instant.

04 features

What the Tailwind editor gives you

Everything below is on the moment you open the Tailwind editor, which starts as a full SaaS landing page — nav, hero, feature grid and pricing — so there is real markup to restyle.

  • Live preview, four ways

    Full width, split beside the code, in real device frames, or in its own tab. The device frames matter here — they are how you check sm:, md: and lg: variants without resizing a window.

  • The VS Code engine

    Monaco brings multi-cursor, find-and-replace across files and the command palette — which is what long strings of utility classes actually need to stay editable.

  • Dark mode as you build

    Toggle a dark class on the root and every dark: variant switches at once, so you design both themes side by side instead of guessing at one.

  • Works in HTML, JSX and Vue

    The same utilities apply to a plain class, a React className or a Vue template, because the engine styles the rendered markup regardless of what produced it.

  • @apply for repeated patterns

    When a cluster of utilities repeats, @apply in a style block folds it into one class — the escape hatch for the handful of cases utilities alone read badly.

  • Export and keep it

    Export the project as a zip and take the markup with you; run the Tailwind CLI locally when you want the minified, production stylesheet.

05 deep dive

Customizing the theme with tailwind.config

The other half of Tailwind is the design system behind the utilities, and you can shape it here without a config file on disk.

Extend the theme inline. A small tailwind.config declared in a script adds your brand colors, fonts and spacing to the scale, so text-brand or p-18 become real utilities the engine generates like any built-in.

It stays just-in-time. Extending the theme does not add weight — the engine still emits only what the markup uses, so a fifty-color palette costs nothing until a class references it.

Honest about the boundary. This is the browser engine, not the Node CLI. Tailwind plugins that run in the build, and the optimized production stylesheet, are a local-machine step — the editor is for authoring and preview, and it says so rather than pretending otherwise.

extend
colors, fonts, spacing
cost
still only what you use
plugins
Node build only
production
Tailwind CLI, local
config
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: { brand: '#6d28d9' },
        fontFamily: { display: ['Space Grotesk'] },
      },
    },
  };
</script>
extend the scale, still generated on demand

06 workflow

From a blank file to a styled landing page

No install, no PostCSS, no config file — the whole loop from an empty document to a responsive, themed page.

tailwind-saas — xcodx
  • new project → Tailwind SaaS
  • created index.html · Tailwind engine loaded
  • add class: md:grid-cols-3
  • utility generated · 3-up grid at ≥768px
  • extend theme: colors.brand
  • text-brand now resolves · 0 extra bytes
  • toggle dark on <html>
  • every dark: variant switched at once
  • export project.zip
  • markup bundled · run the CLI to minify

  • Nothing to configure

    There is no config file to create and no content globs to maintain — the engine reads the markup in front of it.

  • Responsive without resizing

    The device frames render each breakpoint directly, so a lg: variant is something you see rather than something you hope for.

  • Honest about production

    The browser generates every utility you use; the CLI's minified, purged output for shipping is a quick local step on the exported project.

07 ecosystem

Tailwind on top of any markup

Tailwind styles the rendered page, so the same utilities sit on a React component, a Vue template or plain HTML — the editor compiles each per file underneath.

  • React
  • Vue
  • Angular
  • Svelte
  • SolidJS
  • Lit
  • HTMX
  • Vite
  • TypeScript
  • JavaScript
  • HTML
  • CSS
  • SCSS
  • Less
  • Pug
  • Tailwind
  • Bootstrap
  • Vuetify
  • Ant Design
  • shadcn/ui
  • Phaser
  • Node.js
  • Python
  • Java
  • C++
  • C#
  • Go
  • Rust
  • Ruby
  • PHP
  • Kotlin
  • Swift
  • SQL
  • Bash

08 languages

What the editor styles and compiles

Tailwind utilities sit on top of everything the editor compiles in the browser, renders natively, or runs on demand.

Compiled in your browser11

Zero build step. Transform runs on a Web Worker, so typing never blocks.

  • JSX
  • TSX
  • TypeScript
  • Vue SFC
  • Svelte
  • Angular (JIT)
  • SolidJS
  • SCSS
  • Sass
  • Less
  • Pug

Rendered natively8

Straight to the live preview, no transform in the way.

  • HTML
  • CSS
  • JavaScript
  • JSON
  • Markdown
  • Jupyter (.ipynb)
  • SVG
  • YAML

Executed on demand22

70+ languages run through a self-hosted Piston engine. stdout, stderr, images and tracebacks land in the console.

  • Python
  • Java
  • C
  • C++
  • C#
  • Go
  • Rust
  • Ruby
  • PHP
  • Kotlin
  • Swift
  • Lua
  • Scala
  • Perl
  • Haskell
  • Elixir
  • Dart
  • R
  • Julia
  • SQLite
  • Bash
  • PowerShell

09 questions

Tailwind CSS in the browser — common questions

Do I need PostCSS or a build step to use Tailwind here?

No. XCODX loads the official Tailwind browser engine — the same one behind Tailwind Play — which reads your markup and generates the CSS just in time. There is no PostCSS pipeline, no content array to configure and no node_modules; you write classes and the styles appear.

Is this the real Tailwind or a fixed stylesheet?

The real engine. It is not a pre-built CSS file with a subset of classes; it generates utilities on demand from what you type, so arbitrary values, every variant and a customized theme all work exactly as they do with the Tailwind CLI.

Do responsive, hover and dark variants work?

Yes. Prefixes like md:, lg:, hover:, focus: and dark: stack and resolve to real media-and-state rules — md:hover:bg-sky-400 is one class. The device-frame previews are the quickest way to check each breakpoint.

Can I customize the theme with tailwind.config?

Yes. Declare a small tailwind.config in a script to extend colors, fonts and spacing, and the engine treats your additions like built-in utilities — generated only when a class references them, so the theme adds no weight until used.

Does @apply work in the editor?

Yes. Use @apply in a style block to fold a repeated cluster of utilities into a single class name. It is the escape hatch for the few cases where a long utility string reads worse than one semantic class.

Do Tailwind plugins work here?

Plugins that run inside the Node build do not, because there is no Node process — this is the browser engine. Core utilities, variants, arbitrary values and theme extension all work; a plugin-heavy setup is the case that still needs the local CLI.

How do I get a minified production stylesheet?

Export the project and run the Tailwind CLI locally. The browser engine is built for authoring and preview and generates exactly the utilities you use; the CLI's optimized, purged output for shipping is a quick step on the exported files.

Can I use Tailwind with React or Vue in the same editor?

Yes. The engine styles the rendered markup, so utilities on a React className or a Vue template behave the same as on plain HTML, and the editor compiles the JSX or SFC beside them per file.

Do I need to install anything to use XCODX Studio?

No. XCODX Studio is a browser-based IDE — the editor, the compilers and the preview all run client-side. There is no download, no package manager to set up and no configuration file to write. Opening the editor is the whole setup step.

Where is my code stored?

In your own browser. Projects, file history and Git objects live in local storage on your device and are never uploaded to a server. That also means XCODX works offline: it is a Progressive Web App, so you can install it and keep coding with no connection.

Is XCODX Studio free?

Yes. The editor, the live preview, the 70+ language runtimes, npm installs, Git and the integrated terminal are all free to use.

Can I use XCODX on a tablet or Chromebook?

Yes. The editor is a responsive web app, so a Chromebook, an iPad or an Android tablet gets the same compilers and the same preview a laptop does — there is no desktop-only build, because there is no build to install at all. The layout adapts to the screen rather than shrinking a desktop UI into it.

Can I export a project or move it to my own machine?

Yes. Export the whole project as a zip with its folder structure intact and open it locally, or commit it and push. It is ordinary source on disk from that point on — no proprietary format and no lock-in, which is also why importing an existing repository from GitHub works the same way in reverse.

Nothing to install

Open the Tailwind editor now

A responsive, themed layout on screen in under a minute — utilities generated live, no PostCSS, no account wall and nothing to install.

Open the Tailwind playground Browse the docs