CSS のみの Tailwind CSS テキストエリアには、プライマリ、セカンダリ、アクセント、セマンティック カラーのバリエーションが含まれます。サイズはXS〜XL、ゴーストスタイル。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
Textarea components capture multi-line text input from users, perfect for messages, comments, descriptions, and long-form content. Built with native HTML textarea elements and enhanced with Tailwind CSS styling, textareas support multiple sizes, colors, and states. Accessible and fully customizable, they integrate seamlessly into forms and communication interfaces.
CSS のみ。JavaScript は必要ありません。 WCAG AA にアクセス可能で、フレームワークに依存しない - Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
| クラス | タイプ | 説明 |
|---|---|---|
| textarea | ベース | Styled multi-line text input |
| textarea-soft | スタイル | 落ち着いた色合いの背景 |
| textarea-ghost | スタイル | 焦点を合わせるまで境界線が表示されない |
| textarea-dashed | スタイル | 破線の境界線スタイル |
| textarea-xs | サイズ | 極小 |
| textarea-sm | サイズ | 小さい |
| textarea-md | サイズ | 中 (デフォルト) |
| textarea-lg | サイズ | 大きい |
| textarea-xl | サイズ | 特大 |
| textarea-2xl | サイズ | 特大×2 |
| textarea-primary | 色 | 主要テーマの色の境界線 |
| textarea-secondary | 色 | 二次テーマの色の境界線 |
| textarea-accent | 色 | アクセントテーマカラーのボーダー |
| textarea-neutral | 色 | ニュートラルテーマカラーの境界線 |
| textarea-info | 色 | 情報セマンティックカラーボーダー |
| textarea-success | 色 | 成功のセマンティックカラーボーダー |
| textarea-warning | 色 | 警告セマンティックカラー境界線 |
| textarea-error | 色 | エラーセマンティックカラーボーダー |
基本的な使い方
<textarea class="textarea" placeholder="Enter your message here..."></textarea> |
<textarea className="textarea" placeholder="Enter your message here..."></textarea> |
テキストエリアのサイズ
1 2 3 4 5 6 7 8 9 10 11 | <textarea class="textarea textarea-xs" placeholder="Extra Small"></textarea> <textarea class="textarea textarea-sm" placeholder="Small"></textarea> <textarea class="textarea textarea-md" placeholder="Medium"></textarea> <textarea class="textarea textarea-lg" placeholder="Large"></textarea> <textarea class="textarea textarea-xl" placeholder="Extra Large"></textarea> <textarea class="textarea textarea-2xl" placeholder="2X Large"></textarea> |
テキストエリアの色
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <textarea class="textarea" placeholder="Default"></textarea> <textarea class="textarea textarea-primary" placeholder="Primary"></textarea> <textarea class="textarea textarea-secondary" placeholder="Secondary"></textarea> <textarea class="textarea textarea-accent" placeholder="Accent"></textarea> <textarea class="textarea textarea-info" placeholder="Info"></textarea> <textarea class="textarea textarea-success" placeholder="Success"></textarea> <textarea class="textarea textarea-warning" placeholder="Warning"></textarea> <textarea class="textarea textarea-error" placeholder="Error"></textarea> |
テキストエリアのスタイル
1 2 3 4 5 6 7 | <textarea class="textarea" placeholder="Default style"></textarea> <textarea class="textarea textarea-soft" placeholder="Soft style"></textarea> <textarea class="textarea textarea-dashed" placeholder="Dashed style"></textarea> <textarea class="textarea textarea-ghost" placeholder="Ghost style"></textarea> |
無効化されたテキストエリア
1 2 3 | <textarea class="textarea" placeholder="Enabled textarea"></textarea> <textarea class="textarea" placeholder="Disabled textarea" disabled></textarea> |
ラベル付きのテキストエリア
1 2 3 4 | <label> <span>Your feedback</span> <textarea class="textarea w-full" placeholder="Share your thoughts..."></textarea> </label> |
文字数のあるテキストエリア
1 2 3 4 5 | <label> <span>Write a message (max 200 characters)</span> <textarea class="textarea w-full" placeholder="Type here..." maxlength="200"></textarea> <span>Characters remaining</span> </label> |
高度なMarkdownエディター
markdown-text-editor を使用すると、テキストエリアを完全なマークダウン エディターに変えることができます。
プレーン (未加工の Markdown 構文) とハイブリッド (入力時に書式設定をライブでレンダリング) の 2 つのモードが利用可能です。
その他の設定オプションについては、プラグインのドキュメントをご覧ください。
プレーンモード
生の Markdown 構文を表示します。ユーザーはテキストエリアに直接 Markdown を記述します。
<textarea id="plain-markdown-editor" name="content"></textarea> |
1 2 3 | import MarkdownEditor from 'https://cdn.jsdelivr.net/npm/markdown-text-editor/+esm'; new MarkdownEditor('#plain-markdown-editor'); |
ハイブリッドモード
入力時に書式設定がリアルタイムに表示されます。太字、見出し、リストなどがインラインでスタイル設定されて表示されます。
<textarea id="hybrid-markdown-editor" name="content"></textarea> |
1 2 3 | import MarkdownEditor from 'https://cdn.jsdelivr.net/npm/markdown-text-editor/+esm'; new MarkdownEditor('#hybrid-markdown-editor', { mode: 'hybrid' }); |
Claude コード、Cursor、または別の AI エディターを使用していますか?
Cherry MCP は、AI エディタに正確な テキストエリア クラス名と構造をオンデマンドで提供します。もう幻覚のような授業はありません。