Wrapper
Cette classe utilitaire est une alternative aux classes utilitaire container-* de Tailwind 3.
Installation
npx shadcn@latest add https://ui.oward.dev/r/registry.json wrapperPuis importer le CSS dans le fichier CSS Tailwind :
@import "../components/tailwind/wrapper/style.css";Utilisation
La classe wrap implémente une grille CSS modulaire avec trois zones principales :
| Zone | Variable CSS | Description |
|---|---|---|
| Contenu central | --wrapper | Zone par défaut pour les éléments enfants |
| Contenu étendu | --wrapper-breakout | Zone de débordement contrôlée |
| Padding de sécurité | --wrapper-padding | Espace tampon périphérique |
Comportement des éléments enfants
- Zone centrale (défaut) : Tous les éléments enfants directs sont initialement contenus dans cette zone.
- Breakout : Ajoutez la classe
breakoutpour étendre un élément dans la zone de contenu étendu. - Largeur maximale : Utilisez la classe
unwrappour occuper toute la largeur disponible.
Responsive Design
Sur les écrans de plus en plus petits :
- La zone
breakoutse réduit progressivement - Sur très petits écrans, elle disparaît complètement
- La zone de
contents'adapte et prend toute la largeur - Seule la zone de padding de sécurité subsiste
Ne pas utiliser de classe qui affecte la gap horizontale là où est appliquée
la classe wrap
.
Par exemple, éviter d'utiliser
gap-x-4 sur un
élément avec la classe
wrap.
Imbrication
Vous pouvez imbriquer plusieurs conteneurs wrap pour des mises en page complexes. Chaque conteneur gérera ses propres zones de contenu et de débordement indépendamment.
Vous pouvez aussi cumuler les classes unwrap sur une élément enfant et un
wrap sur le même élément.
<div class="wrap">
<section>
<h1>Titre</h1>
<p>Edito</p>
</section>
<section class="bg-primary text-white unwrap wrap">
<!-- ⬅️ -->
Mon contenu wrappé avec un fond de couleur qui occupe toute la largeur du
viewport
</section>
</div>Exemple
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.