--- title: "Diff" 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 Diff for side-by-side content comparisons. Resizable, color-coded layouts for code reviews, document diffs, and before/after change tracking." url: https://frutjam.com/zh-hant/components/diff --- # Diff Component 差異元件顯示兩個版本內容之間的差異，非常適合顯示程式碼變更、文件修訂或比較視圖。差異採用語義 HTML 和顏色編碼樣式構建，可幫助使用者了解更改的內容。 Frutjam diff 系統支援多種類型和樣式—非常適合版本控制介面、修訂歷史記錄和變更追蹤。僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。 | 班級 | 類型 | 描述 | | ------------ | --- | --------------- | | diff | 根據 | 帶有可拖曳分隔線的並排比較容器 | | diff-item-1 | 修飾符 | 比較的左（前）窗格 | | diff-item-2 | 修飾符 | 比較的右（後）窗格 | | diff-resizer | 修飾符 | 可拖曳手把來調整兩個窗格的大小 | ## 基本用法建立一個簡單的並排比較之前和之後的狀態。 ## 差異文字比較並排顯示程式碼或文字變更以進行詳細比較。 ```html

const greeting = "Hello";
console.log(greeting);
let count = 0;

const greeting = "Hello World";
console.log(greeting);
let count = 1;

``` ## 與顏色編碼的差異使用語意顏色突出顯示已刪除、新增或變更的內容。 ```html

- const old = "value";

+ const updated = "value";

``` ## 影像比較使用可拖曳的縮放器比較前後影像之間的視覺變化。 ```html

``` ## 尺寸差異使用容器上的寬度和高度實用程式控制差異大小。 ```html

Small

Diff

Medium

Diff

Large

Diff

```