Wrapper
This utility class is an alternative to Tailwind 3's container-* utility classes.
Installation
npx oward-ui add wrapperThen import the CSS in your main Tailwind CSS file:
@import "./tailwind/wrapper.css";Usage
The wrap class implements a modular CSS grid with three main zones:
| Zone | CSS Variable | Description |
|---|---|---|
| Central content | --wrapper | Default zone for child elements |
| Extended content | --wrapper-breakout | Controlled overflow zone |
| Safety padding | --wrapper-padding | Peripheral buffer space |
Child element behavior
- Central zone (default): All direct child elements are initially contained within this zone.
- Breakout: Add the
breakoutclass to extend an element into the extended content zone. - Full width: Use the
unwrapclass to occupy the full available width.
Responsive Design
On increasingly smaller screens:
- The
breakoutzone progressively shrinks - On very small screens, it disappears completely
- The
contentzone adapts and takes the full width - Only the safety padding zone remains
Warning
Do not use classes that affect horizontal gap where the wrap class is applied.
For example, avoid using gap-x-4 on an element with the wrap class.
Nesting
You can nest multiple wrap containers for complex layouts. Each container will manage its own content and overflow zones independently.
Tip
You can also combine the unwrap class on a child element with
wrap on the same element.
<div class="wrap">
<section>
<h1>Title</h1>
<p>Edito</p>
</section>
<section class="bg-primary text-white unwrap wrap">
<!-- ⬅️ -->
My wrapped content with a background color that spans the full viewport
width
</section>
</div>Example
Title
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aperiam cupiditate possimus ullam voluptatum numquam! Dicta incidunt rem distinctio nemo architecto magnam nobis, voluptatem nostrum labore! Totam quae rerum molestiae accusantium earum consequuntur harum similique rem cupiditate, suscipit, illo quisquam temporibus? Vel, quaerat assumenda consequuntur quis deleniti dignissimos unde sunt, veniam hic aut amet mollitia vero et iusto.
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, labore. Vero possimus quasi adipisci! Esse temporibus non expedita? Natus mollitia quam deserunt, nam iure dignissimos consectetur laborum adipisci repudiandae ad, magni, nisi illum quisquam rerum nobis ullam tenetur sed saepe!
Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, perferendis! Consequatur, adipisci nulla. Modi dolore officia minima voluptate dolor vitae provident enim, nulla error cumque libero, obcaecati ipsam neque quos.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nisi reprehenderit ipsa. Eum aut, itaque rem iste officia qui ut, molestiae nisi quisquam repellat inventore esse ea enim. Voluptate, doloribus? Laborum adipisci autem rem excepturi vero architecto similique, recusandae aliquam cumque? Repudiandae autem quisquam qui quas.