components

Tailwind CSS Diff

The Diff component allows for a side-by-side comparison of two items, making it easy to identify their differences and similarities.

Class Name
Type
Description
diffComponentBase class for the diff component
diff-item-1ComponentBase class for the first item in the diff
diff-item-2ComponentBase class for the second item in the diff
diff-resizerComponentBase class for the resizer in the diff
blur-smUtilityAdds a small blur effect to the image

The standard format for the diff is component class diff with two child div’s with class diff-item-1 and diff-item-2 respectively whereas the diff-resizer class is used to resize the diff.

Use the blur-sm utility class to add a blur effect to the image. The intensity of the blur effect can be adjusted using the TailwindCSS Blur utility classes.

Use div’s with custom text and background color in diff to create a text diff.