---
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/pl/components/diff
---
# Diff Component
Komponenty Diff wyświetlają różnice między dwiema wersjami treści, co idealnie nadaje się do pokazywania zmian w kodzie, wersji dokumentów lub widoków porównawczych. Zbudowane w oparciu o semantyczny kod HTML i stylizację oznaczoną kolorami, różnice pomagają użytkownikom zrozumieć, co się zmieniło. System różnicowy Frutjam obsługuje wiele typów i stylów — idealnie nadaje się do interfejsów kontroli wersji, historii wersji i śledzenia zmian.
Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
| Klasa | Typ | Opis |
| ------------ | ----------- | -------------------------------------------------------------- |
| diff | Opierać | Kontener porównawczy obok siebie z przeciąganym separatorem |
| diff-item-1 | Modyfikator | Lewy (przed) panel porównania |
| diff-item-2 | Modyfikator | Prawy (po) okienku porównania |
| diff-resizer | Modyfikator | Przeciągany uchwyt umożliwiający zmianę rozmiaru dwóch okienek |
## Podstawowe użycie
Utwórz prostą różnicę obok siebie ze stanami przed i po.
## Porównanie tekstu różnicowego
Wyświetlaj zmiany kodu lub tekstu obok siebie, aby uzyskać szczegółowe porównanie.
```html
const greeting = "Hello";
console.log(greeting);
let count = 0;
const greeting = "Hello World";
console.log(greeting);
let count = 1;
```
## Porównaj za pomocą kodowania kolorami
Użyj kolorów semantycznych, aby wyróżnić usuniętą, dodaną lub zmienioną treść.
```html
- const old = "value";
+ const updated = "value";
```
## Porównanie obrazów
Porównaj zmiany wizualne między obrazami przed i po za pomocą przeciąganego narzędzia do zmiany rozmiaru.
```html
```
## Różne rozmiary
Kontroluj rozmiar różnicy za pomocą narzędzi szerokości i wysokości w kontenerze.
```html
