Box Decoration Break

v2.1+

Utilities for controlling how element fragments should be rendered across multiple lines, columns, or pages.

Use the and decoration-clone utilities to control whether properties like background, border, border-image, box-shadow, clip-page, margin, and padding should be rendered as if the element were one continuous fragment, or distinct blocks.

To control the box-decoration-break property at a specific breakpoint, add a {screen}: prefix to any existing box-decoration-break utility. For example, use to apply the decoration-slice utility at only medium screen sizes and above.

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

By default, only responsive variants are generated for box-decoration-break utilities.

For example, this config will also generate hover and focus variants:

Disabling

If you don’t plan to use the box-decoration-break utilities in your project, you can disable them entirely by setting the boxDecorationBreak property to in the corePlugins section of your config file:

←Container