Dimension
Controls the height and width of an element simultaneously.
Utility | Properties |
---|---|
d-0 | height: 0rem; width: 0rem; |
d-1 | height: 0.25rem; width: 0.25rem; |
d-2 | height: 0.5rem; width: 0.5rem; |
d-3 | height: 0.75rem; width: 0.75rem; |
d-4 | height: 1rem; width: 1rem; |
d-5 | height: 1.25rem; width: 1.25rem; |
d-6 | height: 1.5rem; width: 1.5rem; |
d-7 | height: 1.75rem; width: 1.75rem; |
d-8 | height: 2rem; width: 2rem; |
d-9 | height: 2.25rem; width: 2.25rem; |
d-10 | height: 2.5rem; width: 2.5rem; |
d-11 | height: 2.75rem; width: 2.75rem; |
d-12 | height: 3rem; width: 3rem; |
d-13 | height: 3.25rem; width: 3.25rem; |
d-14 | height: 3.5rem; width: 3.5rem; |
d-15 | height: 3.75rem; width: 3.75rem; |
d-16 | height: 4rem; width: 4rem; |
d-17 | height: 4.25rem; width: 4.25rem; |
d-18 | height: 4.5rem; width: 4.5rem; |
d-19 | height: 4.75rem; width: 4.75rem; |
d-20 | height: 5rem; width: 5rem; |
d-21 | height: 5.25rem; width: 5.25rem; |
d-22 | height: 5.5rem; width: 5.5rem; |
d-23 | height: 5.75rem; width: 5.75rem; |
d-24 | height: 6rem; width: 6rem; |
d-25 | height: 6.25rem; width: 6.25rem; |
d-26 | height: 6.5rem; width: 6.5rem; |
d-27 | height: 6.75rem; width: 6.75rem; |
d-28 | height: 7rem; width: 7rem; |
d-29 | height: 7.25rem; width: 7.25rem; |
d-30 | height: 7.5rem; width: 7.5rem; |
d-31 | height: 7.75rem; width: 7.75rem; |
d-32 | height: 8rem; width: 8rem; |
d-33 | height: 8.25rem; width: 8.25rem; |
d-34 | height: 8.5rem; width: 8.5rem; |
d-35 | height: 8.75rem; width: 8.75rem; |
d-36 | height: 9rem; width: 9rem; |
d-37 | height: 9.25rem; width: 9.25rem; |
d-38 | height: 9.5rem; width: 9.5rem; |
d-39 | height: 9.75rem; width: 9.75rem; |
d-40 | height: 10rem; width: 10rem; |
d-41 | height: 10.25rem; width: 10.25rem; |
d-42 | height: 10.5rem; width: 10.5rem; |
d-43 | height: 10.75rem; width: 10.75rem; |
d-44 | height: 11rem; width: 11rem; |
d-45 | height: 11.25rem; width: 11.25rem; |
d-46 | height: 11.5rem; width: 11.5rem; |
d-47 | height: 11.75rem; width: 11.75rem; |
d-48 | height: 12rem; width: 12rem; |
d-49 | height: 12.25rem; width: 12.25rem; |
d-50 | height: 12.5rem; width: 12.5rem; |
d-51 | height: 12.75rem; width: 12.75rem; |
d-52 | height: 13rem; width: 13rem; |
d-53 | height: 13.25rem; width: 13.25rem; |
d-54 | height: 13.5rem; width: 13.5rem; |
d-55 | height: 13.75rem; width: 13.75rem; |
d-56 | height: 14rem; width: 14rem; |
d-57 | height: 14.25rem; width: 14.25rem; |
d-58 | height: 14.5rem; width: 14.5rem; |
d-59 | height: 14.75rem; width: 14.75rem; |
d-60 | height: 15rem; width: 15rem; |
d-61 | height: 15.25rem; width: 15.25rem; |
d-62 | height: 15.5rem; width: 15.5rem; |
d-63 | height: 15.75rem; width: 15.75rem; |
d-64 | height: 16rem; width: 16rem; |
d-65 | height: 16.25rem; width: 16.25rem; |
d-66 | height: 16.5rem; width: 16.5rem; |
d-67 | height: 16.75rem; width: 16.75rem; |
d-68 | height: 17rem; width: 17rem; |
d-69 | height: 17.25rem; width: 17.25rem; |
d-70 | height: 17.5rem; width: 17.5rem; |
d-71 | height: 17.75rem; width: 17.75rem; |
d-72 | height: 18rem; width: 18rem; |
d-73 | height: 18.25rem; width: 18.25rem; |
d-74 | height: 18.5rem; width: 18.5rem; |
d-75 | height: 18.75rem; width: 18.75rem; |
d-76 | height: 19rem; width: 19rem; |
d-77 | height: 19.25rem; width: 19.25rem; |
d-78 | height: 19.5rem; width: 19.5rem; |
d-79 | height: 19.75rem; width: 19.75rem; |
d-80 | height: 20rem; width: 20rem; |
d-81 | height: 20.25rem; width: 20.25rem; |
d-82 | height: 20.5rem; width: 20.5rem; |
d-83 | height: 20.75rem; width: 20.75rem; |
d-84 | height: 21rem; width: 21rem; |
d-85 | height: 21.25rem; width: 21.25rem; |
d-86 | height: 21.5rem; width: 21.5rem; |
d-87 | height: 21.75rem; width: 21.75rem; |
d-88 | height: 22rem; width: 22rem; |
d-89 | height: 22.25rem; width: 22.25rem; |
d-90 | height: 22.5rem; width: 22.5rem; |
d-91 | height: 22.75rem; width: 22.75rem; |
d-92 | height: 23rem; width: 23rem; |
d-93 | height: 23.25rem; width: 23.25rem; |
d-94 | height: 23.5rem; width: 23.5rem; |
d-95 | height: 23.75rem; width: 23.75rem; |
d-96 | height: 24rem; width: 24rem; |
d-97 | height: 24.25rem; width: 24.25rem; |
d-98 | height: 24.5rem; width: 24.5rem; |
d-99 | height: 24.75rem; width: 24.75rem; |
d-100 | height: 25rem; width: 25rem; |
d-auto | height: auto; width: auto; |
d-dvh | height: 100dvh; width: 100dvh; |
d-fc | height: fit-content; width: fit-content; |
d-full | height: 100%; width: 100%; |
d-half | height: 50%; width: 50%; |
d-max | height: max-content; width: max-content; |
d-min | height: min-content; width: min-content; |
This example showcases various dimensions: 4rem, 5rem, and 6rem. The element will be relatively small in size, will be slightly larger and noticeably larger, respectively.
<div class="d-g g-16 gtc-1 sm:gtc-3"> <div class="ai-c bg-indigo d-f d-16 jc-c rad-1 tc-white">16</div> <div class="ai-c bg-indigo d-f d-20 jc-c rad-1 tc-white">20</div> <div class="ai-c bg-indigo d-f d-24 jc-c rad-1 tc-white">24</div></div>
Max Dimension
Controls the maximum height and max width of an element at once.
Utility | Properties |
---|---|
max-d-0 | max-height: 0rem; max-width: 0rem; |
max-d-1 | max-height: 0.25rem; max-width: 0.25rem; |
max-d-2 | max-height: 0.5rem; max-width: 0.5rem; |
max-d-3 | max-height: 0.75rem; max-width: 0.75rem; |
max-d-4 | max-height: 1rem; max-width: 1rem; |
max-d-5 | max-height: 1.25rem; max-width: 1.25rem; |
max-d-6 | max-height: 1.5rem; max-width: 1.5rem; |
max-d-7 | max-height: 1.75rem; max-width: 1.75rem; |
max-d-8 | max-height: 2rem; max-width: 2rem; |
max-d-9 | max-height: 2.25rem; max-width: 2.25rem; |
max-d-10 | max-height: 2.5rem; max-width: 2.5rem; |
max-d-11 | max-height: 2.75rem; max-width: 2.75rem; |
max-d-12 | max-height: 3rem; max-width: 3rem; |
max-d-13 | max-height: 3.25rem; max-width: 3.25rem; |
max-d-14 | max-height: 3.5rem; max-width: 3.5rem; |
max-d-15 | max-height: 3.75rem; max-width: 3.75rem; |
max-d-16 | max-height: 4rem; max-width: 4rem; |
max-d-17 | max-height: 4.25rem; max-width: 4.25rem; |
max-d-18 | max-height: 4.5rem; max-width: 4.5rem; |
max-d-19 | max-height: 4.75rem; max-width: 4.75rem; |
max-d-20 | max-height: 5rem; max-width: 5rem; |
max-d-21 | max-height: 5.25rem; max-width: 5.25rem; |
max-d-22 | max-height: 5.5rem; max-width: 5.5rem; |
max-d-23 | max-height: 5.75rem; max-width: 5.75rem; |
max-d-24 | max-height: 6rem; max-width: 6rem; |
max-d-25 | max-height: 6.25rem; max-width: 6.25rem; |
max-d-26 | max-height: 6.5rem; max-width: 6.5rem; |
max-d-27 | max-height: 6.75rem; max-width: 6.75rem; |
max-d-28 | max-height: 7rem; max-width: 7rem; |
max-d-29 | max-height: 7.25rem; max-width: 7.25rem; |
max-d-30 | max-height: 7.5rem; max-width: 7.5rem; |
max-d-31 | max-height: 7.75rem; max-width: 7.75rem; |
max-d-32 | max-height: 8rem; max-width: 8rem; |
max-d-33 | max-height: 8.25rem; max-width: 8.25rem; |
max-d-34 | max-height: 8.5rem; max-width: 8.5rem; |
max-d-35 | max-height: 8.75rem; max-width: 8.75rem; |
max-d-36 | max-height: 9rem; max-width: 9rem; |
max-d-37 | max-height: 9.25rem; max-width: 9.25rem; |
max-d-38 | max-height: 9.5rem; max-width: 9.5rem; |
max-d-39 | max-height: 9.75rem; max-width: 9.75rem; |
max-d-40 | max-height: 10rem; max-width: 10rem; |
max-d-41 | max-height: 10.25rem; max-width: 10.25rem; |
max-d-42 | max-height: 10.5rem; max-width: 10.5rem; |
max-d-43 | max-height: 10.75rem; max-width: 10.75rem; |
max-d-44 | max-height: 11rem; max-width: 11rem; |
max-d-45 | max-height: 11.25rem; max-width: 11.25rem; |
max-d-46 | max-height: 11.5rem; max-width: 11.5rem; |
max-d-47 | max-height: 11.75rem; max-width: 11.75rem; |
max-d-48 | max-height: 12rem; max-width: 12rem; |
max-d-49 | max-height: 12.25rem; max-width: 12.25rem; |
max-d-50 | max-height: 12.5rem; max-width: 12.5rem; |
max-d-51 | max-height: 12.75rem; max-width: 12.75rem; |
max-d-52 | max-height: 13rem; max-width: 13rem; |
max-d-53 | max-height: 13.25rem; max-width: 13.25rem; |
max-d-54 | max-height: 13.5rem; max-width: 13.5rem; |
max-d-55 | max-height: 13.75rem; max-width: 13.75rem; |
max-d-56 | max-height: 14rem; max-width: 14rem; |
max-d-57 | max-height: 14.25rem; max-width: 14.25rem; |
max-d-58 | max-height: 14.5rem; max-width: 14.5rem; |
max-d-59 | max-height: 14.75rem; max-width: 14.75rem; |
max-d-60 | max-height: 15rem; max-width: 15rem; |
max-d-61 | max-height: 15.25rem; max-width: 15.25rem; |
max-d-62 | max-height: 15.5rem; max-width: 15.5rem; |
max-d-63 | max-height: 15.75rem; max-width: 15.75rem; |
max-d-64 | max-height: 16rem; max-width: 16rem; |
max-d-65 | max-height: 16.25rem; max-width: 16.25rem; |
max-d-66 | max-height: 16.5rem; max-width: 16.5rem; |
max-d-67 | max-height: 16.75rem; max-width: 16.75rem; |
max-d-68 | max-height: 17rem; max-width: 17rem; |
max-d-69 | max-height: 17.25rem; max-width: 17.25rem; |
max-d-70 | max-height: 17.5rem; max-width: 17.5rem; |
max-d-71 | max-height: 17.75rem; max-width: 17.75rem; |
max-d-72 | max-height: 18rem; max-width: 18rem; |
max-d-73 | max-height: 18.25rem; max-width: 18.25rem; |
max-d-74 | max-height: 18.5rem; max-width: 18.5rem; |
max-d-75 | max-height: 18.75rem; max-width: 18.75rem; |
max-d-76 | max-height: 19rem; max-width: 19rem; |
max-d-77 | max-height: 19.25rem; max-width: 19.25rem; |
max-d-78 | max-height: 19.5rem; max-width: 19.5rem; |
max-d-79 | max-height: 19.75rem; max-width: 19.75rem; |
max-d-80 | max-height: 20rem; max-width: 20rem; |
max-d-81 | max-height: 20.25rem; max-width: 20.25rem; |
max-d-82 | max-height: 20.5rem; max-width: 20.5rem; |
max-d-83 | max-height: 20.75rem; max-width: 20.75rem; |
max-d-84 | max-height: 21rem; max-width: 21rem; |
max-d-85 | max-height: 21.25rem; max-width: 21.25rem; |
max-d-86 | max-height: 21.5rem; max-width: 21.5rem; |
max-d-87 | max-height: 21.75rem; max-width: 21.75rem; |
max-d-88 | max-height: 22rem; max-width: 22rem; |
max-d-89 | max-height: 22.25rem; max-width: 22.25rem; |
max-d-90 | max-height: 22.5rem; max-width: 22.5rem; |
max-d-91 | max-height: 22.75rem; max-width: 22.75rem; |
max-d-92 | max-height: 23rem; max-width: 23rem; |
max-d-93 | max-height: 23.25rem; max-width: 23.25rem; |
max-d-94 | max-height: 23.5rem; max-width: 23.5rem; |
max-d-95 | max-height: 23.75rem; max-width: 23.75rem; |
max-d-96 | max-height: 24rem; max-width: 24rem; |
max-d-97 | max-height: 24.25rem; max-width: 24.25rem; |
max-d-98 | max-height: 24.5rem; max-width: 24.5rem; |
max-d-99 | max-height: 24.75rem; max-width: 24.75rem; |
max-d-100 | max-height: 25rem; max-width: 25rem; |
max-d-auto | max-height: auto; max-width: auto; |
max-d-dvh | max-height: 100dvh; max-width: 100dvh; |
max-d-fc | max-height: fit-content; max-width: fit-content; |
max-d-full | max-height: 100%; max-width: 100%; |
max-d-half | max-height: 50%; max-width: 50%; |
max-d-max | max-height: max-content; max-width: max-content; |
max-d-min | max-height: min-content; max-width: min-content; |
This example sets the maximum height and width of an element to 16rem. The max-d-64 utility ensures the element does not exceed a size of 16rem in both height and width.
<div class="o-auto ai-c bg-indigo d-16 d-f jc-c max-d-64 min-d-32 p-6 r-b rad-1 tc-white">64</div>
Min Dimension
Controls the minimum height and min width of an element at once.
Utility | Properties |
---|---|
min-d-0 | min-height: 0rem; min-width: 0rem; |
min-d-1 | min-height: 0.25rem; min-width: 0.25rem; |
min-d-2 | min-height: 0.5rem; min-width: 0.5rem; |
min-d-3 | min-height: 0.75rem; min-width: 0.75rem; |
min-d-4 | min-height: 1rem; min-width: 1rem; |
min-d-5 | min-height: 1.25rem; min-width: 1.25rem; |
min-d-6 | min-height: 1.5rem; min-width: 1.5rem; |
min-d-7 | min-height: 1.75rem; min-width: 1.75rem; |
min-d-8 | min-height: 2rem; min-width: 2rem; |
min-d-9 | min-height: 2.25rem; min-width: 2.25rem; |
min-d-10 | min-height: 2.5rem; min-width: 2.5rem; |
min-d-11 | min-height: 2.75rem; min-width: 2.75rem; |
min-d-12 | min-height: 3rem; min-width: 3rem; |
min-d-13 | min-height: 3.25rem; min-width: 3.25rem; |
min-d-14 | min-height: 3.5rem; min-width: 3.5rem; |
min-d-15 | min-height: 3.75rem; min-width: 3.75rem; |
min-d-16 | min-height: 4rem; min-width: 4rem; |
min-d-17 | min-height: 4.25rem; min-width: 4.25rem; |
min-d-18 | min-height: 4.5rem; min-width: 4.5rem; |
min-d-19 | min-height: 4.75rem; min-width: 4.75rem; |
min-d-20 | min-height: 5rem; min-width: 5rem; |
min-d-21 | min-height: 5.25rem; min-width: 5.25rem; |
min-d-22 | min-height: 5.5rem; min-width: 5.5rem; |
min-d-23 | min-height: 5.75rem; min-width: 5.75rem; |
min-d-24 | min-height: 6rem; min-width: 6rem; |
min-d-25 | min-height: 6.25rem; min-width: 6.25rem; |
min-d-26 | min-height: 6.5rem; min-width: 6.5rem; |
min-d-27 | min-height: 6.75rem; min-width: 6.75rem; |
min-d-28 | min-height: 7rem; min-width: 7rem; |
min-d-29 | min-height: 7.25rem; min-width: 7.25rem; |
min-d-30 | min-height: 7.5rem; min-width: 7.5rem; |
min-d-31 | min-height: 7.75rem; min-width: 7.75rem; |
min-d-32 | min-height: 8rem; min-width: 8rem; |
min-d-33 | min-height: 8.25rem; min-width: 8.25rem; |
min-d-34 | min-height: 8.5rem; min-width: 8.5rem; |
min-d-35 | min-height: 8.75rem; min-width: 8.75rem; |
min-d-36 | min-height: 9rem; min-width: 9rem; |
min-d-37 | min-height: 9.25rem; min-width: 9.25rem; |
min-d-38 | min-height: 9.5rem; min-width: 9.5rem; |
min-d-39 | min-height: 9.75rem; min-width: 9.75rem; |
min-d-40 | min-height: 10rem; min-width: 10rem; |
min-d-41 | min-height: 10.25rem; min-width: 10.25rem; |
min-d-42 | min-height: 10.5rem; min-width: 10.5rem; |
min-d-43 | min-height: 10.75rem; min-width: 10.75rem; |
min-d-44 | min-height: 11rem; min-width: 11rem; |
min-d-45 | min-height: 11.25rem; min-width: 11.25rem; |
min-d-46 | min-height: 11.5rem; min-width: 11.5rem; |
min-d-47 | min-height: 11.75rem; min-width: 11.75rem; |
min-d-48 | min-height: 12rem; min-width: 12rem; |
min-d-49 | min-height: 12.25rem; min-width: 12.25rem; |
min-d-50 | min-height: 12.5rem; min-width: 12.5rem; |
min-d-51 | min-height: 12.75rem; min-width: 12.75rem; |
min-d-52 | min-height: 13rem; min-width: 13rem; |
min-d-53 | min-height: 13.25rem; min-width: 13.25rem; |
min-d-54 | min-height: 13.5rem; min-width: 13.5rem; |
min-d-55 | min-height: 13.75rem; min-width: 13.75rem; |
min-d-56 | min-height: 14rem; min-width: 14rem; |
min-d-57 | min-height: 14.25rem; min-width: 14.25rem; |
min-d-58 | min-height: 14.5rem; min-width: 14.5rem; |
min-d-59 | min-height: 14.75rem; min-width: 14.75rem; |
min-d-60 | min-height: 15rem; min-width: 15rem; |
min-d-61 | min-height: 15.25rem; min-width: 15.25rem; |
min-d-62 | min-height: 15.5rem; min-width: 15.5rem; |
min-d-63 | min-height: 15.75rem; min-width: 15.75rem; |
min-d-64 | min-height: 16rem; min-width: 16rem; |
min-d-65 | min-height: 16.25rem; min-width: 16.25rem; |
min-d-66 | min-height: 16.5rem; min-width: 16.5rem; |
min-d-67 | min-height: 16.75rem; min-width: 16.75rem; |
min-d-68 | min-height: 17rem; min-width: 17rem; |
min-d-69 | min-height: 17.25rem; min-width: 17.25rem; |
min-d-70 | min-height: 17.5rem; min-width: 17.5rem; |
min-d-71 | min-height: 17.75rem; min-width: 17.75rem; |
min-d-72 | min-height: 18rem; min-width: 18rem; |
min-d-73 | min-height: 18.25rem; min-width: 18.25rem; |
min-d-74 | min-height: 18.5rem; min-width: 18.5rem; |
min-d-75 | min-height: 18.75rem; min-width: 18.75rem; |
min-d-76 | min-height: 19rem; min-width: 19rem; |
min-d-77 | min-height: 19.25rem; min-width: 19.25rem; |
min-d-78 | min-height: 19.5rem; min-width: 19.5rem; |
min-d-79 | min-height: 19.75rem; min-width: 19.75rem; |
min-d-80 | min-height: 20rem; min-width: 20rem; |
min-d-81 | min-height: 20.25rem; min-width: 20.25rem; |
min-d-82 | min-height: 20.5rem; min-width: 20.5rem; |
min-d-83 | min-height: 20.75rem; min-width: 20.75rem; |
min-d-84 | min-height: 21rem; min-width: 21rem; |
min-d-85 | min-height: 21.25rem; min-width: 21.25rem; |
min-d-86 | min-height: 21.5rem; min-width: 21.5rem; |
min-d-87 | min-height: 21.75rem; min-width: 21.75rem; |
min-d-88 | min-height: 22rem; min-width: 22rem; |
min-d-89 | min-height: 22.25rem; min-width: 22.25rem; |
min-d-90 | min-height: 22.5rem; min-width: 22.5rem; |
min-d-91 | min-height: 22.75rem; min-width: 22.75rem; |
min-d-92 | min-height: 23rem; min-width: 23rem; |
min-d-93 | min-height: 23.25rem; min-width: 23.25rem; |
min-d-94 | min-height: 23.5rem; min-width: 23.5rem; |
min-d-95 | min-height: 23.75rem; min-width: 23.75rem; |
min-d-96 | min-height: 24rem; min-width: 24rem; |
min-d-97 | min-height: 24.25rem; min-width: 24.25rem; |
min-d-98 | min-height: 24.5rem; min-width: 24.5rem; |
min-d-99 | min-height: 24.75rem; min-width: 24.75rem; |
min-d-100 | min-height: 25rem; min-width: 25rem; |
min-d-auto | min-height: auto; min-width: auto; |
min-d-dvh | min-height: 100dvh; min-width: 100dvh; |
min-d-fc | min-height: fit-content; min-width: fit-content; |
min-d-full | min-height: 100%; min-width: 100%; |
min-d-half | min-height: 50%; min-width: 50%; |
min-d-max | min-height: max-content; min-width: max-content; |
min-d-min | min-height: min-content; min-width: min-content; |
This example sets the minimum height and width of an element to 16rem. The min-d-64 utility ensures the element does not shrink below a size of 16rem in both height and width.
<div class="o-auto ai-c bg-indigo d-16 d-f jc-c max-d-64 min-d-32 p-6 r-b rad-1 tc-white">32</div>
Conditional styles
Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.
You can combine responsive breakpoints like sm:d-*
,md:d-*
, lg:d-*
, and xxl:d-*
allows targeting specific utilities in different viewports.
<div class="d-1 md:d-2 ..."></div>
Alternatively, you can apply :hover
by using h:d-*
utility to override elements and change their values when hovering over them.
<div class="d-1 h:d-2 ..."></div>