---
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/tr/components/diff
---
# Diff Component
Fark bileşenleri, içeriğin iki sürümü arasındaki farkları görüntüler; kod değişikliklerini, belge revizyonlarını veya karşılaştırma görünümlerini göstermek için idealdir. Anlamsal HTML ve renk kodlu stil ile oluşturulan farklar, kullanıcıların nelerin değiştiğini anlamalarına yardımcı olur. Frutjam diff sistemi birden fazla türü ve stili destekler; sürüm kontrol arayüzleri, revizyon geçmişi ve değişiklik takibi için mükemmeldir.
Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.
| Sınıf | Tip | Tanım |
| ------------ | ----------- | ---------------------------------------------------------------- |
| diff | Temel | Sürüklenebilir bölücüye sahip yan yana karşılaştırma kapsayıcısı |
| diff-item-1 | Değiştirici | Karşılaştırmanın sol (önceki) bölmesi |
| diff-item-2 | Değiştirici | Karşılaştırmanın sağ (sonra) bölmesi |
| diff-resizer | Değiştirici | İki bölmeyi yeniden boyutlandırmak için sürüklenebilir tutamaç |
## Temel Kullanım
Önceki ve sonraki durumlarla basit bir yan yana fark oluşturun.
## Fark Metin Karşılaştırması
Ayrıntılı karşılaştırma için kod veya metin değişikliklerini yan yana görüntüleyin.
```html
const greeting = "Hello";
console.log(greeting);
let count = 0;
const greeting = "Hello World";
console.log(greeting);
let count = 1;
```
## Renk Kodlaması ile Fark
Kaldırılan, eklenen veya değiştirilen içeriği vurgulamak için anlamsal renkleri kullanın.
```html
- const old = "value";
+ const updated = "value";
```
## Görüntü Karşılaştırma
Sürüklenebilir yeniden boyutlandırıcıyla önceki ve sonraki görüntüler arasındaki görsel değişiklikleri karşılaştırın.
```html
```
## Fark Boyutları
Kaptaki genişlik ve yükseklik yardımcı programlarını kullanarak fark boyutunu kontrol edin.
```html
