---
title: "Chat"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Chat Bubble with start/end alignment, avatars, timestamps, and status indicators. Build accessible messaging UIs without JavaScript."
url: https://frutjam.com/zh-hant/components/chat
---

# Chat Bubble Component

聊天元件以可讀、有組織的格式顯示對話訊息。聊天氣泡採用語義 HTML 和靈活的佈局構建，代表用戶和系統訊息。 Frutjam 聊天系統支援多種顏色、對齊方式和樣式，非常適合訊息傳遞介面、客戶支援面板和對話式 UI。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

| 班級                    | 類型  | 描述             |
| --------------------- | --- | -------------- |
| chat                  | 根據  | 單一聊天訊息行的包裝     |
| chat-bubble           | 修飾符 | 風格化的消息氣泡       |
| chat-avatar           | 修飾符 | 頭像顯示在訊息旁邊      |
| chat-header           | 修飾符 | 氣泡上方的寄件者名稱或元數據 |
| chat-footer           | 修飾符 | 氣泡下方的時間戳或狀態    |
| chat-start            | 修飾符 | 將氣泡向左對齊（傳入訊息）  |
| chat-end              | 修飾符 | 將氣泡向右對齊（傳出訊息）  |
| chat-xs               | 尺寸  | 特小號            |
| chat-sm               | 尺寸  | 小的             |
| chat-md               | 尺寸  | 中（預設）          |
| chat-lg               | 尺寸  | 大的             |
| chat-xl               | 尺寸  | 特大號            |
| chat-bubble-primary   | 顏色  | 主要主題顏色氣泡       |
| chat-bubble-secondary | 顏色  | 次要主題彩色氣泡       |
| chat-bubble-accent    | 顏色  | 口音主題顏色氣泡       |
| chat-bubble-neutral   | 顏色  | 中性主題色泡泡        |
| chat-bubble-info      | 顏色  | 訊息語意顏色氣泡       |
| chat-bubble-success   | 顏色  | 成功語意彩色氣泡       |
| chat-bubble-warning   | 顏色  | 警告語意顏色氣泡       |
| chat-bubble-error     | 顏色  | 錯誤語意顏色氣泡       |

## 基本用法

## 與頭像聊天

```html
<div class="chat chat-start">
  <div class="chat-avatar avatar">
    <div class="w-10 rounded-full bg-primary"></div>
  </div>
  <div class="chat-bubble">Hello!</div>
</div>

<div class="chat chat-end">
  <div class="chat-avatar avatar">
    <div class="w-10 rounded-full bg-secondary"></div>
  </div>
  <div class="chat-bubble">Hi there!</div>
</div>
```

## 聊天尺寸

```html
<div class="chat chat-start chat-sm">
  <div class="chat-bubble">Small message</div>
</div>

<div class="chat chat-start chat-md">
  <div class="chat-bubble">Medium message</div>
</div>

<div class="chat chat-start chat-lg">
  <div class="chat-bubble">Large message</div>
</div>
```

## 聊天風格

```html
<div class="chat chat-start">
  <div class="chat-bubble">Default style</div>
</div>

<div class="chat chat-start">
  <div class="chat-bubble chat-bubble-primary">Primary message</div>
</div>

<div class="chat chat-start">
  <div class="chat-bubble chat-bubble-secondary">Secondary message</div>
</div>

<div class="chat chat-start">
  <div class="chat-bubble chat-bubble-accent">Accent message</div>
</div>
```

## 聊天頁首和頁尾

```html
<div class="chat chat-start">
  <div class="chat-header">John</div>
  <div class="chat-bubble">Thanks! I'm looking forward to it.</div>
  <time class="text-xs opacity-50">12:45</time>
</div>

<div class="chat chat-end">
  <div class="chat-header">You</div>
  <div class="chat-bubble">I'll see you tomorrow!</div>
  <time class="text-xs opacity-50">12:46</time>
</div>
```

## 對話主題

```html
<div>
  <div class="chat chat-start">
    <div class="chat-avatar avatar">
      <div class="w-10 rounded-full bg-primary"></div>
    </div>
    <div class="chat-bubble">Hello! How can I help?</div>
  </div>

  <div class="chat chat-end">
    <div class="chat-avatar avatar">
      <div class="w-10 rounded-full bg-secondary"></div>
    </div>
    <div class="chat-bubble">I need help with my order</div>
  </div>

  <div class="chat chat-start">
    <div class="chat-avatar avatar">
      <div class="w-10 rounded-full bg-primary"></div>
    </div>
    <div class="chat-bubble">I'd be happy to assist you!</div>
  </div>
</div>
```