Dimension
Control the width & height of an element simultaneously.
Usage
16
20
24
<div class="d-g g-16 gtc-1 sm:gtc-3"> <div class="ai-c bg-indigo d-f d-16 jc-c c-white">16</div> <div class="ai-c bg-indigo d-f d-20 jc-c c-white">20</div> <div class="ai-c bg-indigo d-f d-24 jc-c c-white">24</div></div>Max Dimension
Limit the maximum width and height of an element.
Try changing the size of the box.
64
<div class="o-auto ai-c bg-indigo d-16 d-f jc-c max-d-64 min-d-32 p-6 r-b c-white">64</div>Min Dimension
Set the minimum width and height of an element.
Try changing the size of the box.
32
<div class="o-auto ai-c bg-indigo d-16 d-f jc-c max-d-64 min-d-32 p-6 r-b c-white">32</div>Responsive Design
Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.
Target viewport sizes with breakpoint prefixes.
sm:d-[value]Small≥640px
md:d-[value]Medium≥768px
lg:d-[value]Large≥1024px
xxl:d-[value]Extra Large≥1536px
Hover State
Apply styles conditionally on hover using the h: prefix.
Add the h: prefix to apply styles only when the user hovers over the element.
Syntax:
h:d-[value]