Breakout
breakout allows an item to break out of their containing element. They just add negative margins 😉, but they’re useful for the times you forget that negative margins exists.
Let an element break out of its container
breakout lets the element break out of the container they are in. It uses negative margins to do this.
<div class="breakout-4"> ... </div>Control the breakout amount with spacing values
breakout accepts Tailwind spacing and arbitrary values. Use these to control the amount you wish to break out.
<div class="breakout-4"> ... </div><div class="breakout-[2rlh]"> ... </div>Breakout works in all 4 directions
Like negative margin, breakout works in 4 directions: top, bottom, left, and right.
Inline and block breakouts
You can also use x for inline breakout and y for block breakout.
Basic Usage
breakout works like Tailwind’s margin and padding utilities. It lets you break out of a container with negative margins.
<!-- Breakout --><div class="breakout-4"> ... </div>
<!-- Equivalent to negative margins --><div class="-mx-4"> ... </div>breakout also supports Tailwind’s arbitrary values so you can use other units like em and rlh.
<!-- Breakout --><div class="breakout-[2rlh]"> ... </div>Breakout directions
You can use breakout in 4 directions:
breakout-tfor top breakoutbreakout-bfor bottom breakoutbreakout-lfor left breakoutbreakout-rfor right breakout
<!-- Top --><div class="breakout-t-4"> ... </div>
<!-- Bottom --><div class="breakout-b-4"> ... </div>
<!-- Left --><div class="breakout-l-4"> ... </div>
<!-- Right --><div class="breakout-r-4"> ... </div>You can also use the following shorthand classes:
breakout-x: for inline breakoutbreakout-y: for block breakout
<!-- Block --><div class="breakout-y-4"> ... </div>
<!-- Inline --><div class="breakout-x-4"> ... </div>breakout out of overflow
Negative margins does not allow you to break out of containers with overflow set to hidden or scroll. As such, breakout would not work as well.
<!-- Doesn't work --><div class="overflow-hidden"> <div class="breakout-4">...</div></div>The best way to break out of such containers is to move element outside of the container.
Full breakouts
Full breakouts — those that reaches the ends of the external container — can be achieved through grid-with-breakout.
Please purchase a license to view this content
This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.
If you already have a license, please login to access this content.
Basic Usage
breakout works like Tailwind’s margin and padding utilities. It lets you break out of a container with negative margins.
<!-- Breakout --><div class="breakout-4"> ... </div>
<!-- Equivalent to negative margins --><div class="-mx-4"> ... </div>breakout also supports Tailwind’s arbitrary values so you can use other units like em and rlh.
<!-- Breakout --><div class="breakout-[2rlh]"> ... </div>Breakout directions
You can use breakout in 4 directions:
breakout-tfor top breakoutbreakout-bfor bottom breakoutbreakout-lfor left breakoutbreakout-rfor right breakout
<!-- Top --><div class="breakout-t-4"> ... </div>
<!-- Bottom --><div class="breakout-b-4"> ... </div>
<!-- Left --><div class="breakout-l-4"> ... </div>
<!-- Right --><div class="breakout-r-4"> ... </div>You can also use the following shorthand classes:
breakout-x: for inline breakoutbreakout-y: for block breakout
<!-- Block --><div class="breakout-y-4"> ... </div>
<!-- Inline --><div class="breakout-x-4"> ... </div>breakout out of overflow
Negative margins does not allow you to break out of containers with overflow set to hidden or scroll. As such, breakout would not work as well.
<!-- Doesn't work --><div class="overflow-hidden"> <div class="breakout-4">...</div></div>The best way to break out of such containers is to move element outside of the container.
Full breakouts
Full breakouts — those that reaches the ends of the external container — can be achieved through grid-with-breakout.
Breakout utilities
| Class | Description |
|---|---|
breakout-x | Breaks out on the inline axis (left and right) |
breakout-y | Breaks out on the block axis (top and bottom) |
breakout-top | Breaks out on top |
breakout-bottom | Breaks out on bottom |
breakout-left | Breaks out on left |
breakout-right | Breaks out on left |
Please purchase a license to view this content
This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.
If you already have a license, please login to access this content.
Breakout utilities
| Class | Description |
|---|---|
breakout-x | Breaks out on the inline axis (left and right) |
breakout-y | Breaks out on the block axis (top and bottom) |
breakout-top | Breaks out on top |
breakout-bottom | Breaks out on bottom |
breakout-left | Breaks out on left |
breakout-right | Breaks out on left |