僅 CSS 的 Tailwind CSS 文字區域，具有主要、次要、重音和語義顏色變體。尺寸 xs-xl，幽靈風格。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
文字區域元件可擷取使用者的多行文字輸入，非常適合訊息、評論、描述和長格式內容。文字區域採用原生 HTML 文字區域元素構建，並透過 Tailwind CSS 樣式進行增強，支援多種尺寸、顏色和狀態。它們可訪問且完全可定制，可無縫整合到表單和通訊介面中。
僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
| 班級 | 類型 | 描述 |
|---|---|---|
| textarea | 根據 | 樣式多行文字輸入 |
| 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> |
文字區域大小
html
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> |
文字區域顏色
html
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> |
文字區域樣式
html
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> |
禁用文字區域
html
1 2 3 | <textarea class="textarea" placeholder="Enabled textarea"></textarea> <textarea class="textarea" placeholder="Disabled textarea" disabled></textarea> |
標籤的文字區域
html
1 2 3 4 | <label> <span>Your feedback</span> <textarea class="textarea w-full" placeholder="Share your thoughts..."></textarea> </label> |
具有字元數的文字區域
html
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 編輯器。
有兩種模式可用：純文字（原始 Markdown 語法）和混合（在您輸入時即時呈現格式）。
如需更多配置選項，請參閱插件文件。
普通模式
顯示原始 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 Code、Cursor 或其他 AI 編輯器？
Cherry MCP 為您的 AI 編輯器按需提供準確的 文字區 類別名稱和結構。不再有幻覺課程。