The style panel

Select an element on the canvas and the right panel shows where it’s written and everything you can change about it. The style groups never write CSS rules: each control swaps utility classes on the element, in your file, the way you would have typed them. In a project with Tailwind 4 those are Tailwind’s own classes; in any other project they’re the same classes with a mid: prefix (see What midcode writes).

The panel always shows what’s on screen. When the element has a class for a property, the control shows that class’s value. When it doesn’t, the control shows the computed value as a placeholder.

What the panel shows

From the top:

1. 1

   The element’s name and tag, with buttons to edit its component, ask your agent about it, copy its reference and comment on it.

2. 2

   Code: where it’s written. “Element” is the element itself, “Instance” the place its component is used, and “Inside” the nearest elements around it that are written in other files. Click a row to copy file:line:col; the icon that appears on hover is “Open code” (see Code view).

3. 3

   Depending on the element: Props, element settings for form fields, embeds and players, and Link, Image or Video, and Text (see Text, images and video).

4. 4

   The style groups: Position, Size, Layout, Typography, Fill, Styles, Spacing and Classes.

Layout isn’t shown for images, videos, SVGs, iframes and canvases. Typography only shows where there’s text to set.

An element that isn’t written in your project (something a library draws) has no style groups: the panel says so, and you can edit its parent or the component that uses it.

Which breakpoint you’re editing

The first row, “Breakpoint”, says which breakpoint the edit is for. It follows the frame you clicked the element in, and you can change it there.

One breakpoint is the primary: what you set there is the rule for every width. A value set at any other breakpoint is an override. Overridden properties show their label in blue; right-click the label and choose “Remove override” to follow the primary again.

midcode writes this the Tailwind way, mobile first, with one class per breakpoint where the value changes. With the default breakpoints (Desktop is the primary, Tablet writes at md, Phone has no prefix), setting the vertical padding to 48 in the Phone frame does this:

-<section className="px-6 py-24">+<section className="px-6 py-12 md:py-24">

Phone gets py-12, and md:py-24 keeps Tablet and Desktop where they were. An override also carries on to the breakpoints beyond it, away from the primary, while they were showing the same value: change the font size in the Tablet frame and Phone follows, unless Phone has its own.

-<h1 className="text-6xl">+<h1 className="text-5xl lg:text-6xl">

Removing the Phone override from the first example puts back px-6 py-24. How a breakpoint gets its screen is on The canvas and breakpoints. In component mode the same rows also choose a variant and a state.

Position

An element positioned with left and top can also be dragged and nudged with the arrow keys on the canvas (see Select, move and resize).

Size

Width and Height each have a value and a mode.

Switching to Fixed writes the size the element has right now, so nothing jumps. Switching to Relative starts at 100%. The value field takes a number (px), a percentage, another unit (20rem becomes w-[20rem]) or a Tailwind size by name (7xl becomes w-7xl). Resize handles on the canvas appear on the axes that are Fixed.

“Min Max” → “Add…” adds a row for Min width, Max width, Min height or Max height. Each has a value and a unit, Fixed (px) or Relative (%), and writes min-w-*, max-w-*, min-h-* or max-h-* (max-w-full for 100%). The minus button removes it.

Images and videos get one more row, “Fit”: Fill (crop) writes object-cover, Fit (whole image) object-contain, Stretch object-fill, Original size object-none.

Layout

Layout arranges what’s inside the element. The plus button in the group’s header (“Add a stack layout”) writes flex flex-col; the minus button (“Remove layout”) takes every layout class away.

A plain block whose children are blocks (a <main> of sections) is already a vertical stack, so the panel shows it as one. The first thing you change writes flex flex-col along with it.

Typography

Under Tag, midcode warns when the page has more than one <h1>, or none. Next to Style, the sliders button edits the text style itself, everywhere it’s used; text styles, fonts and colors are made in the Assets tab (see Theme and design tokens).

Fill

Background writes bg-brand or bg-[#111111].

Every color control opens the same picker. “Project colors” lists the colors of your theme by name, with a search field. “Custom” is a color picker: the canvas follows while you drag, and the class is written when you let go. “Remove color” takes the class away.

Styles

The button at the end of Radius and of Border splits the control in four. Corners write rounded-tl-lg, rounded-tr-lg, rounded-br-lg, rounded-bl-lg; sides write border-t, border-r-2, and so on. Setting the single value again removes the per-corner or per-side classes, so it wins.

Spacing

Padding has a horizontal and a vertical field: px-6, py-24. The button at the end splits it into the four sides, which write pt-*, pr-*, pb-* and pl-*.

Classes

The last group lists every class the element has, as written. The ✕ on a class removes it. “Add class…” takes one or more classes and adds them when you press Enter. Use it for anything the panel has no control for: a margin, a transition, a dark: class.

Number fields and sliders

• –

  ↑ and ↓ in a number field change it by 1, and with ⇧ by the “Nudge amount” from Settings. The class is written when the keys rest.

• –

  Drag a field’s unit (px, %, X, Y) sideways to scrub the number, one step per pixel, with ⇧ for the nudge amount. The canvas shows the value while you drag and the class is written once, when you let go.

• –

  A value typed in rem is converted (1.5rem is 24).

• –

  Opacity, Gap and Radius are sliders. Press anywhere on the bar and drag. ⌥ while dragging moves in single units instead of the slider’s steps. ← and → move one step, ten with ⇧. Enter or a double-click lets you type the number.

Numbers land on the spacing scale when they can. With Tailwind’s default unit of 4 px, 24 becomes px-6, 18 becomes px-4.5, and 17, which isn’t on the scale, becomes px-[17px].

Several elements at once

Shift-click more elements on a page and the panel writes each change to all of them: the same value on each, worked out against each element’s own classes, as one edit and one ⌘Z.

Copy and paste styles

Right-click an element and choose “Copy styles” (⌥⌘C), then “Paste styles” (⌥⌘V) on another. Copying takes the element’s whole class list; pasting replaces the target’s classes with it, as one edit.

“Hide” in the same menu (⌘;) adds hidden to the element, and “Show” removes it.

What midcode writes

One class changes at a time, in place. A class that’s replaced keeps its position in the string; a class that’s new goes at the end. The rest of the line isn’t touched, so git diff shows exactly the edit.

-<section className="px-6 py-16">+<section className="px-6 py-24">

In a project with Tailwind 4, the colors, fonts, text sizes and radii of your @theme are offered by name, and anything else is written as an arbitrary value (text-[#ff5b2e]). More on Tailwind CSS.

-<section className="hero mid:px-6 mid:py-16">+<section className="hero mid:px-6 mid:py-24">

In a project without Tailwind 4 (plain CSS, CSS modules, Bootstrap, Tailwind 3), the classes carry the mid: prefix, a breakpoint override is mid:md:py-24, and midcode compiles them into midcode.css. The panel reads only the mid: classes there: your own classes, like hero above, are left alone. More on Without Tailwind.

When the classes are passed through a helper, midcode edits the string inside it:

-<div className={cn('rounded-xl p-6', active && 'ring-2')}>+<div className={cn('rounded-2xl p-6', active && 'ring-2')}>

Limits

• –

  Classes that aren’t written as text can’t be changed. If the whole className is a variable, midcode says “This element’s classes come from a variable. Edit them in the code.” If the class it has to replace isn’t written in the file (it arrives through a prop, or is put together in code), it says so and writes nothing.

• –

  A class written inside a condition (active && 'ring-2', a branch of a ternary, a key of clsx({ … })) is found, and taken out of that branch when you change its property. The new class is written outside the condition, for every case. Check the diff when you style an element whose classes depend on state. Tailwind CSS has every case.

• –

  The panel reads and writes classes with a breakpoint prefix, and in component mode a variant or state prefix. A class with any other prefix (dark:, max-md:, [&>svg]:) stays exactly as written: midcode doesn’t read it and doesn’t rewrite it.

• –

  There are no controls for margins, grid rows, right and bottom offsets, transitions or transforms. Write those in Classes or in the code.

• –

  A text style or a link style is one class of your project: it can’t change per breakpoint, variant or state.

• –

  From the next release, content that comes from a Markdown file (Hugo, Jekyll, Eleventy) can be selected, but it has no tag to put a class on. A style edit there answers “This is written in Markdown: its words can be changed here, not its classes or attributes. Style it from the template around it.”

• –

  In projects midcode only shows, the panel has no style groups. See Supported stacks.