Height

Controls the height of an element.

Class	Properties
h-0	height: 0rem;
h-1	height: 0.25rem;
h-2	height: 0.5rem;
h-3	height: 0.75rem;
h-4	height: 1rem;
h-5	height: 1.25rem;
h-6	height: 1.5rem;
h-7	height: 1.75rem;
h-8	height: 2rem;
h-9	height: 2.25rem;
h-10	height: 2.5rem;
h-11	height: 2.75rem;
h-12	height: 3rem;
h-13	height: 3.25rem;
h-14	height: 3.5rem;
h-15	height: 3.75rem;
h-16	height: 4rem;
h-17	height: 4.25rem;
h-18	height: 4.5rem;
h-19	height: 4.75rem;
h-20	height: 5rem;
h-21	height: 5.25rem;
h-22	height: 5.5rem;
h-23	height: 5.75rem;
h-24	height: 6rem;
h-25	height: 6.25rem;
h-26	height: 6.5rem;
h-27	height: 6.75rem;
h-28	height: 7rem;
h-29	height: 7.25rem;
h-30	height: 7.5rem;
h-31	height: 7.75rem;
h-32	height: 8rem;
h-33	height: 8.25rem;
h-34	height: 8.5rem;
h-35	height: 8.75rem;
h-36	height: 9rem;
h-37	height: 9.25rem;
h-38	height: 9.5rem;
h-39	height: 9.75rem;
h-40	height: 10rem;
h-41	height: 10.25rem;
h-42	height: 10.5rem;
h-43	height: 10.75rem;
h-44	height: 11rem;
h-45	height: 11.25rem;
h-46	height: 11.5rem;
h-47	height: 11.75rem;
h-48	height: 12rem;
h-49	height: 12.25rem;
h-50	height: 12.5rem;
h-51	height: 12.75rem;
h-52	height: 13rem;
h-53	height: 13.25rem;
h-54	height: 13.5rem;
h-55	height: 13.75rem;
h-56	height: 14rem;
h-57	height: 14.25rem;
h-58	height: 14.5rem;
h-59	height: 14.75rem;
h-60	height: 15rem;
h-61	height: 15.25rem;
h-62	height: 15.5rem;
h-63	height: 15.75rem;
h-64	height: 16rem;
h-65	height: 16.25rem;
h-66	height: 16.5rem;
h-67	height: 16.75rem;
h-68	height: 17rem;
h-69	height: 17.25rem;
h-70	height: 17.5rem;
h-71	height: 17.75rem;
h-72	height: 18rem;
h-73	height: 18.25rem;
h-74	height: 18.5rem;
h-75	height: 18.75rem;
h-76	height: 19rem;
h-77	height: 19.25rem;
h-78	height: 19.5rem;
h-79	height: 19.75rem;
h-80	height: 20rem;
h-81	height: 20.25rem;
h-82	height: 20.5rem;
h-83	height: 20.75rem;
h-84	height: 21rem;
h-85	height: 21.25rem;
h-86	height: 21.5rem;
h-87	height: 21.75rem;
h-88	height: 22rem;
h-89	height: 22.25rem;
h-90	height: 22.5rem;
h-91	height: 22.75rem;
h-92	height: 23rem;
h-93	height: 23.25rem;
h-94	height: 23.5rem;
h-95	height: 23.75rem;
h-96	height: 24rem;
h-97	height: 24.25rem;
h-98	height: 24.5rem;
h-99	height: 24.75rem;
h-100	height: 25rem;
h-1/1	height: 100dvh;
h-1/2	height: 50dvh;
h-auto	height: auto;
h-fc	height: fit-content;
h-full	height: 100%;
h-half	height: 50%;
h-max	height: max-content;
h-min	height: min-content;

<div class="d-g g-16 gtc-4">
  <div class="bg-cyan fw-700 h-8 ins p-2 rad-1 tc-white">2rem</div>
  <div class="bg-cyan fw-700 h-16 ins p-2 rad-1 tc-white">4rem</div>
  <div class="bg-cyan fw-700 h-24 ins p-2 rad-1 tc-white">6rem</div>
  <div class="bg-cyan fw-700 h-32 ins p-2 rad-1 tc-white">8rem</div>
</div>

Using percentages

Control the height percentage of an element.

<div class="b-3 b-d bc-cyan d-g g-16 gtc-2 h-64 p-2 rad-2">
  <div class="bg-cyan fw-700 h-full ins p-2 rad-1 tc-white">100%</div>
  <div class="bg-cyan fw-700 h-half ins p-2 rad-1 tc-white">50%</div>
</div>

Max height

Controls the maximum height of an element.

Class	Properties
max-h-0	max-height: 0rem;
max-h-1	max-height: 0.25rem;
max-h-2	max-height: 0.5rem;
max-h-3	max-height: 0.75rem;
max-h-4	max-height: 1rem;
max-h-5	max-height: 1.25rem;
max-h-6	max-height: 1.5rem;
max-h-7	max-height: 1.75rem;
max-h-8	max-height: 2rem;
max-h-9	max-height: 2.25rem;
max-h-10	max-height: 2.5rem;
max-h-11	max-height: 2.75rem;
max-h-12	max-height: 3rem;
max-h-13	max-height: 3.25rem;
max-h-14	max-height: 3.5rem;
max-h-15	max-height: 3.75rem;
max-h-16	max-height: 4rem;
max-h-17	max-height: 4.25rem;
max-h-18	max-height: 4.5rem;
max-h-19	max-height: 4.75rem;
max-h-20	max-height: 5rem;
max-h-21	max-height: 5.25rem;
max-h-22	max-height: 5.5rem;
max-h-23	max-height: 5.75rem;
max-h-24	max-height: 6rem;
max-h-25	max-height: 6.25rem;
max-h-26	max-height: 6.5rem;
max-h-27	max-height: 6.75rem;
max-h-28	max-height: 7rem;
max-h-29	max-height: 7.25rem;
max-h-30	max-height: 7.5rem;
max-h-31	max-height: 7.75rem;
max-h-32	max-height: 8rem;
max-h-33	max-height: 8.25rem;
max-h-34	max-height: 8.5rem;
max-h-35	max-height: 8.75rem;
max-h-36	max-height: 9rem;
max-h-37	max-height: 9.25rem;
max-h-38	max-height: 9.5rem;
max-h-39	max-height: 9.75rem;
max-h-40	max-height: 10rem;
max-h-41	max-height: 10.25rem;
max-h-42	max-height: 10.5rem;
max-h-43	max-height: 10.75rem;
max-h-44	max-height: 11rem;
max-h-45	max-height: 11.25rem;
max-h-46	max-height: 11.5rem;
max-h-47	max-height: 11.75rem;
max-h-48	max-height: 12rem;
max-h-49	max-height: 12.25rem;
max-h-50	max-height: 12.5rem;
max-h-51	max-height: 12.75rem;
max-h-52	max-height: 13rem;
max-h-53	max-height: 13.25rem;
max-h-54	max-height: 13.5rem;
max-h-55	max-height: 13.75rem;
max-h-56	max-height: 14rem;
max-h-57	max-height: 14.25rem;
max-h-58	max-height: 14.5rem;
max-h-59	max-height: 14.75rem;
max-h-60	max-height: 15rem;
max-h-61	max-height: 15.25rem;
max-h-62	max-height: 15.5rem;
max-h-63	max-height: 15.75rem;
max-h-64	max-height: 16rem;
max-h-65	max-height: 16.25rem;
max-h-66	max-height: 16.5rem;
max-h-67	max-height: 16.75rem;
max-h-68	max-height: 17rem;
max-h-69	max-height: 17.25rem;
max-h-70	max-height: 17.5rem;
max-h-71	max-height: 17.75rem;
max-h-72	max-height: 18rem;
max-h-73	max-height: 18.25rem;
max-h-74	max-height: 18.5rem;
max-h-75	max-height: 18.75rem;
max-h-76	max-height: 19rem;
max-h-77	max-height: 19.25rem;
max-h-78	max-height: 19.5rem;
max-h-79	max-height: 19.75rem;
max-h-80	max-height: 20rem;
max-h-81	max-height: 20.25rem;
max-h-82	max-height: 20.5rem;
max-h-83	max-height: 20.75rem;
max-h-84	max-height: 21rem;
max-h-85	max-height: 21.25rem;
max-h-86	max-height: 21.5rem;
max-h-87	max-height: 21.75rem;
max-h-88	max-height: 22rem;
max-h-89	max-height: 22.25rem;
max-h-90	max-height: 22.5rem;
max-h-91	max-height: 22.75rem;
max-h-92	max-height: 23rem;
max-h-93	max-height: 23.25rem;
max-h-94	max-height: 23.5rem;
max-h-95	max-height: 23.75rem;
max-h-96	max-height: 24rem;
max-h-97	max-height: 24.25rem;
max-h-98	max-height: 24.5rem;
max-h-99	max-height: 24.75rem;
max-h-100	max-height: 25rem;
max-h-1/1	max-height: 100dvh;
max-h-1/2	max-height: 50dvh;
max-h-auto	max-height: auto;
max-h-fc	max-height: fit-content;
max-h-full	max-height: 100%;
max-h-half	max-height: 50%;
max-h-max	max-height: max-content;
max-h-min	max-height: min-content;

Min height

Controls the minimum height of an element.

Class	Properties
min-h-0	min-height: 0rem;
min-h-1	min-height: 0.25rem;
min-h-2	min-height: 0.5rem;
min-h-3	min-height: 0.75rem;
min-h-4	min-height: 1rem;
min-h-5	min-height: 1.25rem;
min-h-6	min-height: 1.5rem;
min-h-7	min-height: 1.75rem;
min-h-8	min-height: 2rem;
min-h-9	min-height: 2.25rem;
min-h-10	min-height: 2.5rem;
min-h-11	min-height: 2.75rem;
min-h-12	min-height: 3rem;
min-h-13	min-height: 3.25rem;
min-h-14	min-height: 3.5rem;
min-h-15	min-height: 3.75rem;
min-h-16	min-height: 4rem;
min-h-17	min-height: 4.25rem;
min-h-18	min-height: 4.5rem;
min-h-19	min-height: 4.75rem;
min-h-20	min-height: 5rem;
min-h-21	min-height: 5.25rem;
min-h-22	min-height: 5.5rem;
min-h-23	min-height: 5.75rem;
min-h-24	min-height: 6rem;
min-h-25	min-height: 6.25rem;
min-h-26	min-height: 6.5rem;
min-h-27	min-height: 6.75rem;
min-h-28	min-height: 7rem;
min-h-29	min-height: 7.25rem;
min-h-30	min-height: 7.5rem;
min-h-31	min-height: 7.75rem;
min-h-32	min-height: 8rem;
min-h-33	min-height: 8.25rem;
min-h-34	min-height: 8.5rem;
min-h-35	min-height: 8.75rem;
min-h-36	min-height: 9rem;
min-h-37	min-height: 9.25rem;
min-h-38	min-height: 9.5rem;
min-h-39	min-height: 9.75rem;
min-h-40	min-height: 10rem;
min-h-41	min-height: 10.25rem;
min-h-42	min-height: 10.5rem;
min-h-43	min-height: 10.75rem;
min-h-44	min-height: 11rem;
min-h-45	min-height: 11.25rem;
min-h-46	min-height: 11.5rem;
min-h-47	min-height: 11.75rem;
min-h-48	min-height: 12rem;
min-h-49	min-height: 12.25rem;
min-h-50	min-height: 12.5rem;
min-h-51	min-height: 12.75rem;
min-h-52	min-height: 13rem;
min-h-53	min-height: 13.25rem;
min-h-54	min-height: 13.5rem;
min-h-55	min-height: 13.75rem;
min-h-56	min-height: 14rem;
min-h-57	min-height: 14.25rem;
min-h-58	min-height: 14.5rem;
min-h-59	min-height: 14.75rem;
min-h-60	min-height: 15rem;
min-h-61	min-height: 15.25rem;
min-h-62	min-height: 15.5rem;
min-h-63	min-height: 15.75rem;
min-h-64	min-height: 16rem;
min-h-65	min-height: 16.25rem;
min-h-66	min-height: 16.5rem;
min-h-67	min-height: 16.75rem;
min-h-68	min-height: 17rem;
min-h-69	min-height: 17.25rem;
min-h-70	min-height: 17.5rem;
min-h-71	min-height: 17.75rem;
min-h-72	min-height: 18rem;
min-h-73	min-height: 18.25rem;
min-h-74	min-height: 18.5rem;
min-h-75	min-height: 18.75rem;
min-h-76	min-height: 19rem;
min-h-77	min-height: 19.25rem;
min-h-78	min-height: 19.5rem;
min-h-79	min-height: 19.75rem;
min-h-80	min-height: 20rem;
min-h-81	min-height: 20.25rem;
min-h-82	min-height: 20.5rem;
min-h-83	min-height: 20.75rem;
min-h-84	min-height: 21rem;
min-h-85	min-height: 21.25rem;
min-h-86	min-height: 21.5rem;
min-h-87	min-height: 21.75rem;
min-h-88	min-height: 22rem;
min-h-89	min-height: 22.25rem;
min-h-90	min-height: 22.5rem;
min-h-91	min-height: 22.75rem;
min-h-92	min-height: 23rem;
min-h-93	min-height: 23.25rem;
min-h-94	min-height: 23.5rem;
min-h-95	min-height: 23.75rem;
min-h-96	min-height: 24rem;
min-h-97	min-height: 24.25rem;
min-h-98	min-height: 24.5rem;
min-h-99	min-height: 24.75rem;
min-h-100	min-height: 25rem;
min-h-1/1	min-height: 100dvh;
min-h-1/2	min-height: 50dvh;
min-h-auto	min-height: auto;
min-h-fc	min-height: fit-content;
min-h-full	min-height: 100%;
min-h-half	min-height: 50%;
min-h-max	min-height: max-content;
min-h-min	min-height: min-content;

---

Using breakpoints

Using responsive breakpoints like sm:h-*, md:h-*, lg:h-*, and xxl:h-* allows targeting specific utilities in different viewports.

<div class="h-1 md:h-2 ..."></div>

Using variants

Using :hover variants such as h:h-* allows you to override elements and change their values when hovering over them.

<div class="h-1 h:h-2 ..."></div>