Visual styling for projects that don’t use Tailwind.
midcode styles projects that don’t use Tailwind CSS 4 (plain CSS, CSS modules, Bootstrap, Sass, Tailwind 3) without asking you to adopt anything. It writes its own utilities on the element with a mid: prefix, like mid:p-6 or mid:md:flex, and keeps a midcode.css file in your project with their plain CSS. Your own classes and stylesheets are never touched.
Free for 3 days, no card. Then one payment, yours for life.
- Status
- Available
- Writes
- mid: utilities on the element
- Adds to your project
- midcode.css, one import
- Needs installed
- Nothing
01/What you can do
What midcode does with Plain CSS & Bootstrap.
The same panel as with Tailwind
Type, color, spacing, layout, size, breakpoints, hover states: every control works, in a project that has never heard of Tailwind.
Never collides with your classes
Every utility carries the mid: prefix, so it can’t clash with your .flex or Bootstrap’s .p-3. midcode reads only its own classes and treats yours as yours.
Plain CSS in your repo
midcode.css sits next to your app’s entry and holds exactly the rules for the classes in your code. It’s committed with the rest, and your build needs nothing new.
A theme of your own
Colors, fonts and text styles you define in the Design panel live in .midcode/theme.css and show up in every control.
Build it without the app
The midcode package for npm, pnpm and yarn regenerates midcode.css in your own build: a CLI, a Vite plugin and a Next.js wrapper.
Scoped reset for what you insert
What you drag in from the Insert panel gets a reset that applies to that element only, never to the rest of your site.
02/How it works
Three steps. No new workflow.
Step 1: Change a style
The first style you change sets it up: midcode.css is created and imported once, as its own commit.
Step 2: midcode compiles
midcode carries the Tailwind 4 compiler inside the app and turns the mid: classes in your code into plain CSS, before each edit lands.
Step 3: Ship it
The CSS file is in your repository. Your site doesn’t depend on midcode to build or run.
03/Good to know
The honest part.
What it doesn’t do
- midcode’s rules are !important, because an edit on the canvas has to win over the site’s own CSS.
- Your existing stylesheets are read by the browser, not by the panel: a value set in your .css shows on the canvas, and changing it from the panel adds a mid: class over it.
04/FAQ
Plain CSS & Bootstrap questions. Short answers.
No. The compiler is inside midcode. Your project gets a plain CSS file and an import line, nothing in package.json.
The mid: classes are plain strings in your markup. If someone adds or removes one by hand, the midcode package regenerates the CSS in your build, or midcode does it the next time the project is open.
Yes. midcode.css is ordinary CSS and the classes are ordinary classes. Nothing breaks if the app is gone.
05/Goes with
The rest of your stack.
Try midcode with Plain CSS & Bootstrap.
Download midcode, point it at your project folder and click something. Three days free, no card, nothing added to your code.