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.
Top
Bottom
Left
Right
Inline and block breakouts
You can also use x for inline breakout and y for block breakout.
block
inline