Keep the demo page's body style out of the package

[snakajima]

src/style.css is the package's dist/style.css, which hosts import into their own page (import "…/style.css", and src/vue/index.ts / src/react/index.ts import it). It also carried the Vue demo page's style:

body {
  @apply m-0 p-5 font-sans bg-gray-100;
}

so every plugin made from this template restyles the host's <body>. In MulmoChat 11 packages ship it (avatar, drawing-game, mindmap, piano, scroll-to-anchor, set-image-style, switch-role, generate-image, quiz, summarize-pdf, akinator): it padded the whole app by 20px (the page scrolled 42px in an 800px window) and set its background and font. MulmoGlass got it from mindmap and quiz. Both apps now override it (receptron/MulmoChat#247, receptron/mulmoglass#26), but the fix belongs here.

Change

• src/style.css: only @import "tailwindcss";, with a comment on why it must not style body, html or :root.
• demo/vue/style.css (new, imported by demo/vue/main.ts): the demo page's body style, in plain CSS, so the demo looks as before. The React demo already had its own demo/react/style.css.
• TEMPLATE.md (en/ja) and docs/ai-development-guide.md state the rule.

Plugins already made from the template need the same change and a new release.

Test

• yarn typecheck, yarn lint, yarn build: dist/style.css has no body rule any more.
• The Vue demo (vite) in headless Chrome: body padding 20px, background rgb(243, 244, 246), system sans font — as before.

🤖 Generated with Claude Code

work in chat