<div class="p-6">
<div>
<h2 class="text-2xl font-medium">Project breakpoints</h2>
</div>
<div class="grid gap-6">
<div class="grid gap-2">
<h2 class="text-lg"><strong>sm</strong></h2>
<p>class: <strong>sm:</strong></p>
<p>min-width: 640px</p>
</div>
<div class="grid gap-2">
<h2 class="text-lg"><strong>md</strong></h2>
<p>class: <strong>md:</strong></p>
<p>min-width: 768px</p>
</div>
<div class="grid gap-2">
<h2 class="text-lg"><strong>lg</strong></h2>
<p>class: <strong>lg:</strong></p>
<p>min-width: 1024px</p>
</div>
<div class="grid gap-2">
<h2 class="text-lg"><strong>xl</strong></h2>
<p>class: <strong>xl:</strong></p>
<p>min-width: 1280px</p>
</div>
<div class="grid gap-2">
<h2 class="text-lg"><strong>xl</strong></h2>
<p>class: <strong>xl:</strong></p>
<p>min-width: 1536px</p>
</div>
</div>
</div>
<div class="p-6">
<div>
<h2 class="text-2xl font-medium">Project breakpoints</h2>
</div>
<div class="grid gap-6">
{% for breakpoint in breakpoints %}
<div class="grid gap-2">
<h2 class="text-lg"><strong>{{ breakpoint.name }}</strong></h2>
<p>class: <strong>{{ breakpoint.class }}:</strong></p>
<p>min-width: {{ breakpoint.width }}</p>
</div>
{% endfor %}
</div>
</div>
{
"breakpoints": [
{
"name": "sm",
"width": "640px",
"class": "sm"
},
{
"name": "md",
"width": "768px",
"class": "md"
},
{
"name": "lg",
"width": "1024px",
"class": "lg"
},
{
"name": "xl",
"width": "1280px",
"class": "xl"
},
{
"name": "xl",
"width": "1536px",
"class": "xl"
}
]
}
These are default Tailwind CSS breakpoints. Use them as a reference or implement them as a consistent container for designs and other components.