Tailwind CSS Box Decoration Break

Box Decoration Break is a Tailwind CSS utility that specifies how an element's box decorations should be distributed across its element fragments.

Syntax

The Box Decoration Break utility has the following syntax:

decoration-{breakpoint}-{value}

where:

• {breakpoint} is a valid Tailwind CSS breakpoint (e.g. sm, md, lg).
• {value} is a valid Box Decoration Break value (e.g. slice, clone).

Examples

Example 1: Set decoration to slice on medium screens and above

<div class="decoration-md-slice"></div>

Example 2: Set decoration to clone on small screens and above

<div class="decoration-sm-clone"></div>

Output

The above examples will output the following CSS:

@media (min-width: 768px) {
  .decoration-md-slice {
    box-decoration-break: slice;
  }
}

@media (min-width: 640px) {
  .decoration-sm-clone {
    box-decoration-break: clone;
  }
}

Explanation

Box Decoration Break specifies how an element's box decorations (like border, padding, margin, etc.) should be distributed across its element fragments when it's broken across multiple lines, columns, or pages.

There are two values for Box Decoration Break:

• slice: The box decorations will only be applied to the fragments that are completely enclosed within the element.
• clone: The box decorations will be applied to all fragments, even those that overlap the element's boundaries.

You can set the Box Decoration Break utility for various breakpoints and values.

Use

You can use Box Decoration Break to control how an element's box decorations are displayed when it spans multiple lines, columns, or pages. This is especially useful when dealing with text that gets broken up across multiple columns.

Important Points

• Box Decoration Break only affects how an element's box decorations are distributed across its element fragments. It doesn't affect how the element's content is distributed.
• Box Decoration Break only works when the element is broken across multiple lines, columns, or pages. If an element is not broken, Box Decoration Break has no effect.

Summary

• Box Decoration Break is a Tailwind CSS utility that specifies how an element's box decorations should be distributed across its element fragments.
• Box Decoration Break has two values: slice and clone.
• Box Decoration Break only affects how an element's box decorations are distributed across its fragments when it's broken across multiple lines, columns, or pages.
• Box Decoration Break can be set for various breakpoints and values.