# The style panel

> Every group of the right panel, the utility classes each control writes, overrides per breakpoint, number fields, and copying styles between elements.

- Page: https://midcode.app/docs/editor/styles
- From the midcode docs. Every page as Markdown: https://midcode.app/llms.txt

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](#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. 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. **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](https://midcode.app/docs/editor/code.md)).
3. Depending on the element: [Props](https://midcode.app/docs/editor/components.md), [element settings](https://midcode.app/docs/editor/components.md) for form fields, embeds and players, and Link, Image or Video, and Text (see [Text, images and video](https://midcode.app/docs/editor/text-and-media.md)).
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:

```diff
-<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.

```diff
-<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](https://midcode.app/docs/editor/canvas.md). In [component mode](https://midcode.app/docs/editor/components.md) the same rows also choose a variant and a state.

## Position

| Control | What it writes |
| --- | --- |
| Type: Default, Relative, Absolute, Fixed, Sticky | `relative`, `absolute`, `fixed`, `sticky`. Default removes the class. |
| Offset (shown for Absolute, Fixed and Sticky) | The X and Y fields write `left-6` and `top-6`, or `-left-4` for a negative number. |

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](https://midcode.app/docs/editor/select-move-resize.md)).

## Size

Width and Height each have a value and a mode.

| Mode | Means | Class |
| --- | --- | --- |
| Fixed | A size in px | `w-80`, or `w-[317px]` off the scale |
| Relative | A percentage of the parent | `w-[50%]` |
| Fill | All the room the parent gives | `w-full`, `h-full` |
| Fit | As big as its content | `w-fit`, `h-fit` |
| Viewport | The size of the window | `w-screen`, `h-svh` |
| Auto | No size of its own | The class is removed |

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](https://midcode.app/docs/editor/select-move-resize.md) 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.

| Control | What it writes |
| --- | --- |
| Type: Stack or Grid | `flex`, or `grid` with `grid-cols-2` to start |
| Direction (stack) | `flex-row` or `flex-col` |
| Columns (grid) | `grid-cols-3` |
| Distribute | `justify-start`, `justify-center`, `justify-end`, `justify-between`, `justify-around`, `justify-evenly` |
| Align | `items-start`, `items-center`, `items-end`, `items-stretch` (shown as Fill) |
| Wrap (stack) | `flex-wrap` |
| Gap | `gap-6` |

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

| Control | What it writes |
| --- | --- |
| Tag | Changes the element itself: `<h2>` to `<h1>`, `<p>`, `<span>`… Opening and closing tag. |
| Style | One of the project's text styles, as its class. |
| Font | `font-sans`, `font-serif`, `font-mono`, or one of your theme's fonts |
| Size | `text-xl` from the scale or your theme, `text-[18px]` for a number |
| Weight | `font-thin` to `font-black` (100 to 900) |
| Line | `leading-tight`, `leading-7`, `leading-[1.4]` |
| Tracking | `tracking-tight`, `tracking-[0.02em]` |
| Align | `text-left`, `text-center`, `text-right`, `text-justify` |
| Wrap: Auto, Balance, Pretty | `text-balance`, `text-pretty`. Auto removes the class. |
| Color | `text-brand` for a theme color, `text-[#ff5b2e]` for a custom one |

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](https://midcode.app/docs/styling/theme.md)).

## 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

| Control | What it writes |
| --- | --- |
| Opacity | `opacity-80`. 100% removes the class. |
| Visible: Yes or No | No writes `hidden` for the breakpoint you're editing (`hidden md:flex`). |
| Overflow: Visible, Hidden, Clip, Scroll when needed | `overflow-visible`, `overflow-hidden`, `overflow-clip`, `overflow-auto` |
| Radius | `rounded-lg` when the number matches a step of the scale or of your theme, `rounded-[10px]` otherwise |
| Border | Width 1, 2, 4 or 8 writes `border`, `border-2`, `border-4`, `border-8`; the color writes `border-brand`. |
| Shadow: XS to 2XL | `shadow-xs` … `shadow-2xl` |

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.

```diff title="Tailwind 4"
-<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](https://midcode.app/docs/styling/tailwind.md).

```diff title="Without Tailwind 4"
-<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](https://midcode.app/docs/styling/without-tailwind.md).

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

```diff
-<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](https://midcode.app/docs/styling/tailwind.md) 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](https://midcode.app/docs/start/supported-stacks.md).