docs: add Tailwind CSS arbitrary values restriction

README.md

@@ -16,6 +16,12 @@ This template is designed for junior engineers to learn plugin development with
 - **TypeScript**: Full type safety
 - **Tailwind CSS 4**: Modern styling
 
+> **⚠️ Important: No Arbitrary Values**
+>
+> Do NOT use Tailwind's arbitrary values (e.g., `bg-[#1a1a2e]`, `w-[137px]`) in plugin code.
+> MulmoChat uses `@source` directive to scan plugins, which only supports standard Tailwind classes.
+> Use standard classes like `bg-slate-900` instead.
+
 ## Quick Start
 
 ```bash

TEMPLATE.md

@@ -377,6 +377,20 @@ export default { plugin };
 
 ## Important Notes
 
+### ⚠️ No Tailwind Arbitrary Values
+
+Do NOT use Tailwind's arbitrary values (JIT syntax) in plugin code:
+
+```html
+<!-- ✅ Good: Standard Tailwind classes -->
+<div class="bg-slate-900 w-48 p-4">
+
+<!-- ❌ Bad: Arbitrary values - will NOT work in MulmoChat -->
+<div class="bg-[#1a1a2e] w-[137px] p-[10px]">
+```
+
+MulmoChat uses Tailwind's `@source` directive to scan plugin dist files. This only works with standard Tailwind classes. If you need custom values, define them in your plugin's `style.css` or use inline styles.
+
 ### ⚠️ View.vue Reactivity
 
 ```typescript
@@ -623,6 +637,20 @@ yarn dev
 
 ## 重要な注意点
 
+### ⚠️ Tailwind Arbitrary Values 禁止
+
+プラグインコードでは Tailwind の arbitrary values（JIT構文）を使用しないでください:
+
+```html
+<!-- ✅ 良い例: 標準 Tailwind クラス -->
+<div class="bg-slate-900 w-48 p-4">
+
+<!-- ❌ 悪い例: Arbitrary values - MulmoChat で動作しません -->
+<div class="bg-[#1a1a2e] w-[137px] p-[10px]">
+```
+
+MulmoChat は Tailwind の `@source` ディレクティブを使用してプラグインの dist ファイルをスキャンします。これは標準の Tailwind クラスのみをサポートします。カスタム値が必要な場合は、プラグインの `style.css` で定義するか、インラインスタイルを使用してください。
+
 ### ⚠️ View.vue のリアクティビティ
 
 ```typescript

docs/getting-started.ja.md

@@ -988,6 +988,7 @@ ESLintがコードの問題点を指摘します。表示されたエラーや
 1. **インタラクティブ性を追加**: `sendTextMessage`を使ってチャットにメッセージを送る
 2. **状態を追加**: `viewState`を使ってUI状態を永続化
 3. **スタイルを整える**: Tailwind CSSで美しいデザイン
+   > ⚠️ **重要**: `bg-[#1a1a2e]` のような arbitrary values は使用しないでください。MulmoChat は `@source` を使ってプラグインをスキャンするため、標準の Tailwind クラスのみサポートされます。
 4. **公開**: [npm公開ガイド](./npm-publishing-guide.md)に従う
 
 詳細は[高度な機能ガイド](./advanced-features.ja.md)を参照してください。

docs/getting-started.md

@@ -990,6 +990,7 @@ ESLint will point out code problems. Fix any errors or warnings shown.
 1. **Add Interactivity**: Use `sendTextMessage` to send messages back to chat
 2. **Add State**: Use `viewState` to persist UI state
 3. **Style It**: Use Tailwind CSS for beautiful designs
+   > ⚠️ **Important**: Do NOT use arbitrary values like `bg-[#1a1a2e]`. MulmoChat uses `@source` to scan plugins, which only supports standard Tailwind classes.
 4. **Publish**: Follow [npm Publishing Guide](./npm-publishing-guide.md)
 
 See [Advanced Features Guide](./advanced-features.md) for details on these topics.

docs/plugin-development-guide.md

@@ -611,6 +611,24 @@ npm run build
 
 ---
 
+## Important Notes
+
+### ⚠️ No Tailwind Arbitrary Values
+
+Do NOT use Tailwind's arbitrary values (JIT syntax) in plugin code:
+
+```html
+<!-- ✅ Good: Standard Tailwind classes -->
+<div class="bg-slate-900 w-48 p-4">
+
+<!-- ❌ Bad: Arbitrary values - will NOT work in MulmoChat -->
+<div class="bg-[#1a1a2e] w-[137px] p-[10px]">
+```
+
+MulmoChat uses Tailwind's `@source` directive to scan plugin dist files. This only works with standard Tailwind classes. If you need custom values, define them in your plugin's `style.css` or use inline styles.
+
+---
+
 ## Checklist
 
 ### Required Files