<div class="py-6 space-y-8">
<div class="px-6">
<h1 class="text-2xl font-bold">Containers</h1>
<p>Demo for used containers: custom utility (with project prefix), and tailwind default.</p>
<p>Difference in default tailwind container and custom one behaviour is shown.</p>
</div>
<div class="grid gap-6">
<div class="n7-container-xxs bg-neutral-300 p-3">
<h2 class="text-lg"><strong>n7-container-xxs</strong></h2>
<p>max-width: 675px custom width - to be edited</p>
</div>
<div class="n7-container-xs bg-neutral-300 p-3">
<h2 class="text-lg"><strong>n7-container-xs</strong></h2>
<p>max-width: 768px (to be edited)</p>
</div>
<div class="n7-container-md bg-neutral-300 p-3">
<h2 class="text-lg"><strong>n7-container-md</strong></h2>
<p>max-width: 1024px (to be edited)</p>
</div>
<div class="n7-container bg-neutral-300 p-3">
<h2 class="text-lg"><strong>n7-container</strong></h2>
<p>max-width: 1280px (to be edited)</p>
</div>
<div class="container bg-neutral-300 p-3">
<h2 class="text-lg"><strong>container</strong></h2>
<p>max-width: Tailwind breakpoints</p>
</div>
</div>
</div>
<div class="py-6 space-y-8">
<div class="px-6">
<h1 class="text-2xl font-bold">Containers</h1>
<p>Demo for used containers: custom utility (with project prefix), and tailwind default.</p>
<p>Difference in default tailwind container and custom one behaviour is shown.</p>
</div>
<div class="grid gap-6">
{% for container in containers %}
<div class="{{ container.name }} bg-neutral-300 p-3">
<h2 class="text-lg"><strong>{{ container.name }}</strong></h2>
<p>max-width: {{ container.width }}</p>
</div>
{% endfor %}
</div>
</div>
{
"containers": [
{
"name": "n7-container-xxs",
"width": "675px custom width - to be edited"
},
{
"name": "n7-container-xs",
"width": "768px (to be edited)"
},
{
"name": "n7-container-md",
"width": "1024px (to be edited)"
},
{
"name": "n7-container",
"width": "1280px (to be edited)"
},
{
"name": "container",
"width": "Tailwind breakpoints"
}
]
}
/**
* CONTAINER UTILITIES
*
*/
@layer utilities {
/* CONTAINER */
/* Custom container utility */
.n7-container-xxs {
@apply max-w-[675px] w-[90%] mx-auto;
}
.n7-container-xs {
@apply max-w-screen-md w-[90%] mx-auto;
}
.n7-container-md {
@apply max-w-screen-lg w-[90%] mx-auto;
}
.n7-container {
@apply max-w-screen-2xl w-[90%] mx-auto;
}
/* RULE FOR NESTED CONTAINERS - prevent horizontal margin */
[class*="n7-container"] [class*="n7-container"] {
@apply mx-0 w-full;
}
}
Project containers. Tailwind default container utility can be used, it can be customized changing Tailwind breakpoints.
NOTICE: Tailwind default container uses different max width for each breakpoint, instead of a fluid behaviour under the max-width layout breakpoint. It is preferred this kind of implementation:
<!-- Full-width fluid until the `md` breakpoint, then lock to container -->
<div class="md:container md:mx-auto">Breakpoint could be lg, xl etc depending on your layout.
Default container is not centered. You can set this in Tailwind config (actually used in this framework, see container documentation above; for custom utility, setting horizontal auto margin is still needed). You can also set a horizontal padding if you need.
In this framework, a custom utility n7-container is used which mixes, for a certain breakpoint, Tailwind container behaviour, and for responsive, a 90% width centered style for container.
For container variants - eg: small or xsmall container used in different sections or for text-only content (in detail pages) - custom utilities are needed. They must be set in css, managing max width using Tailwind max width breakpoints classes. Eg:
.n7-container-xs {
@apply max-w-screen-md w-[90%] mx-auto;
}Naming should be set according to design needs/design framework configurations.
NOTE: container naming (xs, md…) doesn’t reflect Tailwind breakpoint eventually used in that utility (it can be a different width as well), it reflects project needs/actual container use. Eg:
n7-container-xxs
n7-container-xs
n7-container-md
…