A visual editor that writes Tailwind classes.
midcode is a visual editor for projects styled with Tailwind CSS 4. Its panel reads your @theme tokens (colors, fonts, spacing, radius) and writes utility classes on the element you selected, swapping the old class for the new one in place. Breakpoints, hover states and component variants become the prefixes you’d write by hand: md:, hover:, data-[variant=primary]:.
Free for 3 days, no card. Then one payment, yours for life.
- Status
- Available
- Reads
- Your @theme tokens
- Writes
- Utility classes, in place
- Tailwind 3
- Edited too, another way
01/What you can do
What midcode does with Tailwind CSS.
Your tokens in every control
Color pickers show your palette, type shows your fonts and sizes, spacing shows your scale. Pick one and the class that carries it is written.
One class out, one class in
Changing a padding replaces p-4 with p-6. The diff is that change and nothing else: no reordering, no reformatting.
Mobile first, like you’d write it
A value set on Tablet or Phone is written with the right screen prefix, from a table of values per breakpoint that follows the real cascade.
States and variants
Hover, Pressed and Focus are hover:, active: and focus-visible:. A component’s variants are data-[variant=…]: classes on its root and group-data-[…]: inside.
Edit the theme itself
The Design panel changes the tokens in your @theme and your text styles, in your CSS file.
Arbitrary values when you need them
Drag a handle or type a number that isn’t on your scale and you get w-[412px], the way you’d write it.
02/How it works
Three steps. No new workflow.
Step 1: Open the project
midcode finds your CSS entry and reads the tokens in @theme. Nothing to configure.
Step 2: Select and change
The panel works out which classes to remove and which to add for the breakpoint, state and variant you’re on.
Step 3: Read the diff
One line changed, in the file the element is written in.
03/Good to know
The honest part.
What it doesn’t do
- Classes built at runtime (a template string with a variable in it) are left alone: midcode edits the ones written out.
04/FAQ
Tailwind CSS questions. Short answers.
Yes, another way: midcode doesn’t rewrite Tailwind 3 classes. It adds its own prefixed utilities (mid:p-6) next to them and compiles those to a plain CSS file, so what you set on the canvas wins.
No. midcode replaces or adds the classes that changed and leaves the rest of the attribute as you wrote it.
It edits the string literals where the classes are written, inside those calls too. A class picked by a condition at runtime is left alone.
05/Goes with
The rest of your stack.
- Plain CSS & Bootstrap. No Tailwind? midcode writes its own utilities and compiles them to CSS.
- Next.js. App Router projects, edited in their .tsx files. Metadata and pages too.
- React + Vite. Vite projects in React, Preact or Solid, edited in their JSX.
- SvelteKit. SvelteKit and Vite + Svelte, edited in their .svelte files.
Try midcode with Tailwind CSS.
Download midcode, point it at your project folder and click something. Three days free, no card, nothing added to your code.