Search Documentation

Search guides, functions, classes, interfaces, and more

Miniapp theming

Brand a MobyApps miniapp using CSS custom property overrides. shadcn components use hsl(var(--primary)), not Tailwind color names — override variables, not only tailwind.config.

File layout

styles/
  globals.css           # shadcn base tokens + Tailwind @source (app-local)
  miniapp-theme.css     # :root brand overrides (light)
  miniapp-dark.css      # .dark overrides

Import order (layout.tsx)

import "./styles/globals.css"
import "./styles/miniapp-theme.css"
import "./styles/miniapp-dark.css"

Order matters: base → light brand → dark brand.

Design with tweakcn

  1. Open tweakcn.com — use new-york style and neutral base (matches MobyApps scaffold).
  2. Design your palette.
  3. Copy light :root variables → styles/miniapp-theme.css.
  4. Copy .dark variables → styles/miniapp-dark.css.

Example override:

:root {
  --primary: hsl(0, 70%, 50%);
  --background: #00007c;
  --foreground: hsl(220, 20%, 98%);
}

Optional Tailwind extensions

Use tailwind.config.mjs only for app-specific utility classes (e.g. bg-brand-accent), not for replacing shadcn token variables.

Monorepo isolation

In a Turbo monorepo, each miniapp keeps its own styles/miniapp-*.css. Web portals can use a different CSS stack — no shared @workspace/ui/globals.css required.

Next steps