Tailwind CSS - Box Decoration Break

Tailwind CSS: Box Decoration Break

The box-decoration-break utilities in Tailwind CSS control how properties like background, border, padding, and box-shadow are rendered when an element is broken across multiple lines, columns, or pages (fragmentation).

Core Utilities: slice vs. clone

There are two main classes that control this behavior, corresponding to the box-decoration-break CSS property.

Class	CSS Property	Behavior
box-decoration-slice	box-decoration-break: slice;	The element is rendered as a whole and then ‘sliced’ at the break. Decorations (like padding and borders) are not applied at the breaking edge.
box-decoration-clone	box-decoration-break: clone;	Each fragment of the element is rendered as if it were a separate, individual element. Decorations are applied to each fragment independently.

Practical Examples

The difference becomes clear when working with inline elements that wrap onto multiple lines, especially when they have padding, borders, or background gradients.

Default Behavior: box-decoration-slice

With slice (the default), the background gradient spans smoothly across the lines, and the horizontal padding is only applied to the very start and end of the entire <span> element.

<!-- Note: This assumes a modern Tailwind CSS project setup -->
<div class="p-8">
    <h3 class="text-xl font-bold mb-4">Box Decoration Slice (Default)</h3>
    <p class="text-lg leading-relaxed">
        This is a sentence with a
        <span class="box-decoration-slice bg-gradient-to-r from-indigo-500 to-pink-500 text-white p-2 leading-[2.5]">
            highlighted text element that wraps onto multiple lines.
        </span>
         Notice how the padding and gradient are sliced.
    </p>
</div>

Cloned Decorations: box-decoration-clone

With clone, each line gets its own independent decoration. The background gradient restarts on each line, and the horizontal padding is applied to both the left and right sides of each line.

<!-- Note: This assumes a modern Tailwind CSS project setup -->
<div class="p-8">
    <h3 class="text-xl font-bold mb-4">Box Decoration Clone</h3>
    <p class="text-lg leading-relaxed">
        This is a sentence with a
        <span class="box-decoration-clone bg-gradient-to-r from-indigo-500 to-pink-500 text-white p-2 leading-[2.5]">
            highlighted text element that wraps onto multiple lines.
        </span>
         See how each line is decorated as a separate box.
    </p>
</div>

When to Use

• Use box-decoration-slice when you want a continuous, unbroken decoration across fragments, which is generally the desired default behavior.
• Use box-decoration-clone for stylistic effects where you want to emphasize the individual lines of a broken element, such as creating a chunky, highlighted text effect where every line has its own distinct background and padding.

Responsive Variants

Like all utilities in Tailwind, you can apply box-decoration-break utilities conditionally at different breakpoints. For example, md:box-decoration-clone would only apply the clone behavior on medium screens and larger.