diff --git a/README.md b/README.md index 0efe23d..40acba4 100644 --- a/README.md +++ b/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 diff --git a/TEMPLATE.md b/TEMPLATE.md index 4dbfcc1..1783301 100644 --- a/TEMPLATE.md +++ b/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 + +
+ + +
+``` + +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 + +
+ + +
+``` + +MulmoChat は Tailwind の `@source` ディレクティブを使用してプラグインの dist ファイルをスキャンします。これは標準の Tailwind クラスのみをサポートします。カスタム値が必要な場合は、プラグインの `style.css` で定義するか、インラインスタイルを使用してください。 + ### ⚠️ View.vue のリアクティビティ ```typescript diff --git a/docs/getting-started.ja.md b/docs/getting-started.ja.md index 30833d3..5b0f537 100644 --- a/docs/getting-started.ja.md +++ b/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)を参照してください。 diff --git a/docs/getting-started.md b/docs/getting-started.md index 15b1f7c..bbd453a 100644 --- a/docs/getting-started.md +++ b/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. diff --git a/docs/plugin-development-guide.md b/docs/plugin-development-guide.md index 5f66270..e67c4a2 100644 --- a/docs/plugin-development-guide.md +++ b/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 + +
+ + +
+``` + +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