仅 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 | 风格 | No visible border until focused |
| textarea-dashed | 风格 | 虚线边框样式 |
| textarea-xs | 尺寸 | 特小号 |
| textarea-sm | 尺寸 | 小的 |
| textarea-md | 尺寸 | 中（默认） |
| textarea-lg | 尺寸 | 大的 |
| textarea-xl | 尺寸 | 特大号 |
| textarea-2xl | 尺寸 | 2×特大号 |
| textarea-primary | 颜色 | Primary theme color border |
| textarea-secondary | 颜色 | Secondary theme color border |
| textarea-accent | 颜色 | Accent theme color border |
| textarea-neutral | 颜色 | Neutral theme color border |
| textarea-info | 颜色 | Info semantic color border |
| textarea-success | 颜色 | Success semantic color border |
| textarea-warning | 颜色 | Warning semantic color border |
| textarea-error | 颜色 | Error semantic color border |
基本用法
<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 编辑器按需提供准确的 文本区 类名称和结构。不再有幻觉课程。