Styles and Theming

Dollie Editor uses Tailwind utilities and shared design tokens. Load its styles after Tailwind, then provide the theme values your application wants the editor and catalog components to inherit.

Import order

@import "tailwindcss";
@import "@dollie_ai/editor/styles.css";
@import "@dollie_ai/editor-catalog/styles.css";

The engine stylesheet covers the editor workspace. The catalog stylesheet covers the optional Core sections and illustrations.

Preserve host ownership

The editor should feel native to your product. Your application remains the source of truth for:

• fonts;
• foreground and background colors;
• primary and accent colors;
• borders and radii;
• light and dark mode;
• the outer editor layout.

Avoid copying the SDK stylesheet into your application. Importing it keeps fixes and component styles tied to the installed version.

Style your own catalog components normally

Catalog components are ordinary React components. They may use Tailwind classes, CSS modules, or another styling system already supported by your application.

The editor stores their structured props; it does not rewrite their visual design.

Compile additional Section classes

The Section inspector can store additional classes on the SDK-owned wrapper. Those class names live in PageConfig JSON, so Tailwind cannot discover them by scanning your React source. A class works only when your host stylesheet already compiles it—for example because it appears in source code or is included in your Tailwind safelist.

Prefer a small, supported vocabulary of utilities for production editors. The built-in dark theme, border, and divider controls do not require host safelisting.

Verify both surfaces

Check your theme in:

1. the editing workspace;
2. the published SectionRenderer output.

Pay particular attention to focus states, text contrast, popovers, dragged sections, and responsive previews.