Width

Controls the width of an element.

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

<div class="s-y-8">
  <div class="bg-cyan fw-700 ins p-2 rad-1 tc-white w-12">3rem</div>
  <div class="bg-cyan fw-700 ins p-2 rad-1 tc-white w-20">5rem</div>
  <div class="bg-cyan fw-700 ins p-2 rad-1 tc-white w-28">7rem</div>
  <div class="bg-cyan fw-700 ins p-2 rad-1 tc-white w-36">9rem</div>
</div>

Using percentages

Percentage utilities let you change an element’s height based on its container size.

<div class="b-3 b-d bc-cyan p-2 rad-2 s-y-8 w-64">
  <div class="bg-cyan fw-700 ins p-2 rad-1 tc-white w-full">100%</div>
  <div class="bg-cyan fw-700 ins p-2 rad-1 tc-white w-half">50%</div>
</div>

Max width

Controls the maximum width of an element.

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

Min width

Controls the minimum width of an element.

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

---

Using breakpoints

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

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

Using variants

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

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