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