Skip to content
Start free
Full visual editing

A visual editor for Tailwind CSS

Style your Tailwind site from a visual panel and get the classes you would have written yourself. Xodia writes utility classes and your own theme tokens on Tailwind v4 or v3, per screen size and state, in the components that render each element.

Start freeEvery framework

Free plan. 14-day Pro trial. No charge unless you choose a plan.

Settings, General: Xodia detected a Next.js 16 site styled with Tailwind 4 and shadcn/ui, and marks it Full visual editing.

What you edit visually

A Style panel that writes classes

Pick a value in the Style panel and Xodia changes the class list on the element, in your source file. The canvas and the code update together.

  • Classes, not inline styles; classes Xodia doesn't recognize stay as they are
  • A value for phones, tablets or desktops, and for hover or focus, written with prefixes such as md: or hover:
  • Your colors, fonts and spacing from the @theme block on v4; on v3 your AI adds tokens to tailwind.config
  • Sizes in rem, with fluid clamp() values for type and section spacing

The Style panel: a pointer sets the heading's weight to 700 Bold, the heading on the canvas turns bold, the change shows as 1 unsaved and the class font-bold appears in the Code tab.

Any framework Xodia edits

The same panel on every stack

The Style panel works the same way on Vite + React, React Router, Remix, Next.js, Astro, Gatsby and HTML sites on Vite, whenever the site uses Tailwind.

  • Your AI follows the same rules

    Your AI uses Xodia's Tailwind skills: theme steps first, rem values, mobile first, so its changes look like the panel's.

  • shadcn/ui components

    Sites with shadcn/ui keep their components as local source, and your AI edits their variants and theme tokens in place.

  • Your class list, kept

    The panel changes only the classes for the property you set and keeps the rest of the class list as you wrote it.

Versions and skills

The versions it covers, and the skills your AI gets

When your AI works on the site, it loads Xodia's skills for this stack, written for the versions below.

  • Supported versions

    Tailwind CSS v4, with theme tokens from @theme, and Tailwind CSS v3.

  • Tailwind CSS skills

    Theme tokens in v4 and v3, class conventions and fluid steps.

    Written for: Tailwind CSS 3 and 4.

  • shadcn/ui skills

    Components kept as local source, cn() and cva() variants, and theme tokens in :root and .dark mapped to Tailwind.

    Written for: Projects set up with the shadcn CLI (version 4 and earlier) on Tailwind 4 (tokens mapped in @theme inline) or Tailwind 3 (tailwind.config); Base UI, Radix or React Aria primitives.

Typical setup

From your repo to your first edit

Import the repo from GitHub or open a folder on your computer. Xodia installs your packages in a private preview, detects the stack and opens the editor.

  1. Import a Tailwind site from GitHub, open a folder, or start from a Xodia template on Tailwind v4
  2. Xodia detects the Tailwind version and your theme tokens
  3. Select an element and set values in the Style panel
  4. Save the change as a commit on a branch, and review the classes in the diff

The New project dialog: the agent step done, then Import from GitHub with the repositories the GitHub App may open, each with Import, beside Start from a template.

Works with

Your content and your host, as they are

Xodia detects where the content lives and where the site is hosted, and keeps both.

  • Headless CMS

    Starter and up

    Sanity, Contentful, Storyblok and Prismic. Sanity: the deepest support, with Content tab editing, drafts to live, publish and discard, Portable Text and the media library.

  • Content in the repo

    Markdown, MDX, JSON and YAML files, Astro content collections, and Keystatic, Decap and TinaCMS.

  • Hosts

    Starter and up

    Vercel, Netlify and Cloudflare connect to show the live address, deploys and build logs; GitHub Pages is detected. Your host keeps deploying the site, exactly as it does now.

Questions

Tailwind questions

Which Tailwind versions work?

Tailwind CSS v4 and v3.

Will the panel rewrite my classes?

No. It changes only the classes for the property you set, and keeps the rest of the class list as you wrote it.

Does it use my theme?

Yes. On Tailwind v4 the panel offers the colors, fonts and spacing from your @theme block, and the Variables panel edits them, with dark mode colors too.

What does it cost?

The Style panel is part of the visual editor on every plan. See pricing for the rest.

Keep exploring

Other stacks

Style your Tailwind site the way you see it.

Start freeSee pricing