Splendid layouts

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-t for top breakout
  • breakout-b for bottom breakout
  • breakout-l for left breakout
  • breakout-r for 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 breakout
  • breakout-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.

index.html
<!-- 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.