Padding
Controls the padding of an element.
| Class | Properties |
|---|---|
| p-0 | padding: 0rem; |
| p-1 | padding: 0.25rem; |
| p-2 | padding: 0.5rem; |
| p-3 | padding: 0.75rem; |
| p-4 | padding: 1rem; |
| p-5 | padding: 1.25rem; |
| p-6 | padding: 1.5rem; |
| p-7 | padding: 1.75rem; |
| p-8 | padding: 2rem; |
| p-9 | padding: 2.25rem; |
| p-10 | padding: 2.5rem; |
| p-11 | padding: 2.75rem; |
| p-12 | padding: 3rem; |
| p-13 | padding: 3.25rem; |
| p-14 | padding: 3.5rem; |
| p-15 | padding: 3.75rem; |
| p-16 | padding: 4rem; |
| p-17 | padding: 4.25rem; |
| p-18 | padding: 4.5rem; |
| p-19 | padding: 4.75rem; |
| p-20 | padding: 5rem; |
| p-21 | padding: 5.25rem; |
| p-22 | padding: 5.5rem; |
| p-23 | padding: 5.75rem; |
| p-24 | padding: 6rem; |
| p-25 | padding: 6.25rem; |
| p-26 | padding: 6.5rem; |
| p-27 | padding: 6.75rem; |
| p-28 | padding: 7rem; |
| p-29 | padding: 7.25rem; |
| p-30 | padding: 7.5rem; |
| p-31 | padding: 7.75rem; |
| p-32 | padding: 8rem; |
| p-33 | padding: 8.25rem; |
| p-34 | padding: 8.5rem; |
| p-35 | padding: 8.75rem; |
| p-36 | padding: 9rem; |
| p-37 | padding: 9.25rem; |
| p-38 | padding: 9.5rem; |
| p-39 | padding: 9.75rem; |
| p-40 | padding: 10rem; |
| p-41 | padding: 10.25rem; |
| p-42 | padding: 10.5rem; |
| p-43 | padding: 10.75rem; |
| p-44 | padding: 11rem; |
| p-45 | padding: 11.25rem; |
| p-46 | padding: 11.5rem; |
| p-47 | padding: 11.75rem; |
| p-48 | padding: 12rem; |
| p-49 | padding: 12.25rem; |
| p-50 | padding: 12.5rem; |
| p-51 | padding: 12.75rem; |
| p-52 | padding: 13rem; |
| p-53 | padding: 13.25rem; |
| p-54 | padding: 13.5rem; |
| p-55 | padding: 13.75rem; |
| p-56 | padding: 14rem; |
| p-57 | padding: 14.25rem; |
| p-58 | padding: 14.5rem; |
| p-59 | padding: 14.75rem; |
| p-60 | padding: 15rem; |
| p-61 | padding: 15.25rem; |
| p-62 | padding: 15.5rem; |
| p-63 | padding: 15.75rem; |
| p-64 | padding: 16rem; |
| p-65 | padding: 16.25rem; |
| p-66 | padding: 16.5rem; |
| p-67 | padding: 16.75rem; |
| p-68 | padding: 17rem; |
| p-69 | padding: 17.25rem; |
| p-70 | padding: 17.5rem; |
| p-71 | padding: 17.75rem; |
| p-72 | padding: 18rem; |
| p-73 | padding: 18.25rem; |
| p-74 | padding: 18.5rem; |
| p-75 | padding: 18.75rem; |
| p-76 | padding: 19rem; |
| p-77 | padding: 19.25rem; |
| p-78 | padding: 19.5rem; |
| p-79 | padding: 19.75rem; |
| p-80 | padding: 20rem; |
| p-81 | padding: 20.25rem; |
| p-82 | padding: 20.5rem; |
| p-83 | padding: 20.75rem; |
| p-84 | padding: 21rem; |
| p-85 | padding: 21.25rem; |
| p-86 | padding: 21.5rem; |
| p-87 | padding: 21.75rem; |
| p-88 | padding: 22rem; |
| p-89 | padding: 22.25rem; |
| p-90 | padding: 22.5rem; |
| p-91 | padding: 22.75rem; |
| p-92 | padding: 23rem; |
| p-93 | padding: 23.25rem; |
| p-94 | padding: 23.5rem; |
| p-95 | padding: 23.75rem; |
| p-96 | padding: 24rem; |
| p-97 | padding: 24.25rem; |
| p-98 | padding: 24.5rem; |
| p-99 | padding: 24.75rem; |
| p-100 | padding: 25rem; |
| p-auto | padding: auto; |
This example sets the padding to 2rem. The element will have uniform padding inside it.
6
<div class="stripes"> <div class="p-8"> <p class="bg-indigo tc-white p-6">6</p> </div></div>Padding Bottom
Controls the bottom padding of an element.
| Class | Properties |
|---|---|
| pb-0 | padding-bottom: 0rem; |
| pb-1 | padding-bottom: 0.25rem; |
| pb-2 | padding-bottom: 0.5rem; |
| pb-3 | padding-bottom: 0.75rem; |
| pb-4 | padding-bottom: 1rem; |
| pb-5 | padding-bottom: 1.25rem; |
| pb-6 | padding-bottom: 1.5rem; |
| pb-7 | padding-bottom: 1.75rem; |
| pb-8 | padding-bottom: 2rem; |
| pb-9 | padding-bottom: 2.25rem; |
| pb-10 | padding-bottom: 2.5rem; |
| pb-11 | padding-bottom: 2.75rem; |
| pb-12 | padding-bottom: 3rem; |
| pb-13 | padding-bottom: 3.25rem; |
| pb-14 | padding-bottom: 3.5rem; |
| pb-15 | padding-bottom: 3.75rem; |
| pb-16 | padding-bottom: 4rem; |
| pb-17 | padding-bottom: 4.25rem; |
| pb-18 | padding-bottom: 4.5rem; |
| pb-19 | padding-bottom: 4.75rem; |
| pb-20 | padding-bottom: 5rem; |
| pb-21 | padding-bottom: 5.25rem; |
| pb-22 | padding-bottom: 5.5rem; |
| pb-23 | padding-bottom: 5.75rem; |
| pb-24 | padding-bottom: 6rem; |
| pb-25 | padding-bottom: 6.25rem; |
| pb-26 | padding-bottom: 6.5rem; |
| pb-27 | padding-bottom: 6.75rem; |
| pb-28 | padding-bottom: 7rem; |
| pb-29 | padding-bottom: 7.25rem; |
| pb-30 | padding-bottom: 7.5rem; |
| pb-31 | padding-bottom: 7.75rem; |
| pb-32 | padding-bottom: 8rem; |
| pb-33 | padding-bottom: 8.25rem; |
| pb-34 | padding-bottom: 8.5rem; |
| pb-35 | padding-bottom: 8.75rem; |
| pb-36 | padding-bottom: 9rem; |
| pb-37 | padding-bottom: 9.25rem; |
| pb-38 | padding-bottom: 9.5rem; |
| pb-39 | padding-bottom: 9.75rem; |
| pb-40 | padding-bottom: 10rem; |
| pb-41 | padding-bottom: 10.25rem; |
| pb-42 | padding-bottom: 10.5rem; |
| pb-43 | padding-bottom: 10.75rem; |
| pb-44 | padding-bottom: 11rem; |
| pb-45 | padding-bottom: 11.25rem; |
| pb-46 | padding-bottom: 11.5rem; |
| pb-47 | padding-bottom: 11.75rem; |
| pb-48 | padding-bottom: 12rem; |
| pb-49 | padding-bottom: 12.25rem; |
| pb-50 | padding-bottom: 12.5rem; |
| pb-51 | padding-bottom: 12.75rem; |
| pb-52 | padding-bottom: 13rem; |
| pb-53 | padding-bottom: 13.25rem; |
| pb-54 | padding-bottom: 13.5rem; |
| pb-55 | padding-bottom: 13.75rem; |
| pb-56 | padding-bottom: 14rem; |
| pb-57 | padding-bottom: 14.25rem; |
| pb-58 | padding-bottom: 14.5rem; |
| pb-59 | padding-bottom: 14.75rem; |
| pb-60 | padding-bottom: 15rem; |
| pb-61 | padding-bottom: 15.25rem; |
| pb-62 | padding-bottom: 15.5rem; |
| pb-63 | padding-bottom: 15.75rem; |
| pb-64 | padding-bottom: 16rem; |
| pb-65 | padding-bottom: 16.25rem; |
| pb-66 | padding-bottom: 16.5rem; |
| pb-67 | padding-bottom: 16.75rem; |
| pb-68 | padding-bottom: 17rem; |
| pb-69 | padding-bottom: 17.25rem; |
| pb-70 | padding-bottom: 17.5rem; |
| pb-71 | padding-bottom: 17.75rem; |
| pb-72 | padding-bottom: 18rem; |
| pb-73 | padding-bottom: 18.25rem; |
| pb-74 | padding-bottom: 18.5rem; |
| pb-75 | padding-bottom: 18.75rem; |
| pb-76 | padding-bottom: 19rem; |
| pb-77 | padding-bottom: 19.25rem; |
| pb-78 | padding-bottom: 19.5rem; |
| pb-79 | padding-bottom: 19.75rem; |
| pb-80 | padding-bottom: 20rem; |
| pb-81 | padding-bottom: 20.25rem; |
| pb-82 | padding-bottom: 20.5rem; |
| pb-83 | padding-bottom: 20.75rem; |
| pb-84 | padding-bottom: 21rem; |
| pb-85 | padding-bottom: 21.25rem; |
| pb-86 | padding-bottom: 21.5rem; |
| pb-87 | padding-bottom: 21.75rem; |
| pb-88 | padding-bottom: 22rem; |
| pb-89 | padding-bottom: 22.25rem; |
| pb-90 | padding-bottom: 22.5rem; |
| pb-91 | padding-bottom: 22.75rem; |
| pb-92 | padding-bottom: 23rem; |
| pb-93 | padding-bottom: 23.25rem; |
| pb-94 | padding-bottom: 23.5rem; |
| pb-95 | padding-bottom: 23.75rem; |
| pb-96 | padding-bottom: 24rem; |
| pb-97 | padding-bottom: 24.25rem; |
| pb-98 | padding-bottom: 24.5rem; |
| pb-99 | padding-bottom: 24.75rem; |
| pb-100 | padding-bottom: 25rem; |
| pb-auto | padding-bottom: auto; |
This example sets the bottom padding to 2rem. The element will have space inside it at the bottom.
6
<div class="stripes"> <div class="p-8"> <p class="bg-indigo tc-white pb-6">6</p> </div></div>Padding Left
Controls the left padding of an element.
| Class | Properties |
|---|---|
| pl-0 | padding-left: 0rem; |
| pl-1 | padding-left: 0.25rem; |
| pl-2 | padding-left: 0.5rem; |
| pl-3 | padding-left: 0.75rem; |
| pl-4 | padding-left: 1rem; |
| pl-5 | padding-left: 1.25rem; |
| pl-6 | padding-left: 1.5rem; |
| pl-7 | padding-left: 1.75rem; |
| pl-8 | padding-left: 2rem; |
| pl-9 | padding-left: 2.25rem; |
| pl-10 | padding-left: 2.5rem; |
| pl-11 | padding-left: 2.75rem; |
| pl-12 | padding-left: 3rem; |
| pl-13 | padding-left: 3.25rem; |
| pl-14 | padding-left: 3.5rem; |
| pl-15 | padding-left: 3.75rem; |
| pl-16 | padding-left: 4rem; |
| pl-17 | padding-left: 4.25rem; |
| pl-18 | padding-left: 4.5rem; |
| pl-19 | padding-left: 4.75rem; |
| pl-20 | padding-left: 5rem; |
| pl-21 | padding-left: 5.25rem; |
| pl-22 | padding-left: 5.5rem; |
| pl-23 | padding-left: 5.75rem; |
| pl-24 | padding-left: 6rem; |
| pl-25 | padding-left: 6.25rem; |
| pl-26 | padding-left: 6.5rem; |
| pl-27 | padding-left: 6.75rem; |
| pl-28 | padding-left: 7rem; |
| pl-29 | padding-left: 7.25rem; |
| pl-30 | padding-left: 7.5rem; |
| pl-31 | padding-left: 7.75rem; |
| pl-32 | padding-left: 8rem; |
| pl-33 | padding-left: 8.25rem; |
| pl-34 | padding-left: 8.5rem; |
| pl-35 | padding-left: 8.75rem; |
| pl-36 | padding-left: 9rem; |
| pl-37 | padding-left: 9.25rem; |
| pl-38 | padding-left: 9.5rem; |
| pl-39 | padding-left: 9.75rem; |
| pl-40 | padding-left: 10rem; |
| pl-41 | padding-left: 10.25rem; |
| pl-42 | padding-left: 10.5rem; |
| pl-43 | padding-left: 10.75rem; |
| pl-44 | padding-left: 11rem; |
| pl-45 | padding-left: 11.25rem; |
| pl-46 | padding-left: 11.5rem; |
| pl-47 | padding-left: 11.75rem; |
| pl-48 | padding-left: 12rem; |
| pl-49 | padding-left: 12.25rem; |
| pl-50 | padding-left: 12.5rem; |
| pl-51 | padding-left: 12.75rem; |
| pl-52 | padding-left: 13rem; |
| pl-53 | padding-left: 13.25rem; |
| pl-54 | padding-left: 13.5rem; |
| pl-55 | padding-left: 13.75rem; |
| pl-56 | padding-left: 14rem; |
| pl-57 | padding-left: 14.25rem; |
| pl-58 | padding-left: 14.5rem; |
| pl-59 | padding-left: 14.75rem; |
| pl-60 | padding-left: 15rem; |
| pl-61 | padding-left: 15.25rem; |
| pl-62 | padding-left: 15.5rem; |
| pl-63 | padding-left: 15.75rem; |
| pl-64 | padding-left: 16rem; |
| pl-65 | padding-left: 16.25rem; |
| pl-66 | padding-left: 16.5rem; |
| pl-67 | padding-left: 16.75rem; |
| pl-68 | padding-left: 17rem; |
| pl-69 | padding-left: 17.25rem; |
| pl-70 | padding-left: 17.5rem; |
| pl-71 | padding-left: 17.75rem; |
| pl-72 | padding-left: 18rem; |
| pl-73 | padding-left: 18.25rem; |
| pl-74 | padding-left: 18.5rem; |
| pl-75 | padding-left: 18.75rem; |
| pl-76 | padding-left: 19rem; |
| pl-77 | padding-left: 19.25rem; |
| pl-78 | padding-left: 19.5rem; |
| pl-79 | padding-left: 19.75rem; |
| pl-80 | padding-left: 20rem; |
| pl-81 | padding-left: 20.25rem; |
| pl-82 | padding-left: 20.5rem; |
| pl-83 | padding-left: 20.75rem; |
| pl-84 | padding-left: 21rem; |
| pl-85 | padding-left: 21.25rem; |
| pl-86 | padding-left: 21.5rem; |
| pl-87 | padding-left: 21.75rem; |
| pl-88 | padding-left: 22rem; |
| pl-89 | padding-left: 22.25rem; |
| pl-90 | padding-left: 22.5rem; |
| pl-91 | padding-left: 22.75rem; |
| pl-92 | padding-left: 23rem; |
| pl-93 | padding-left: 23.25rem; |
| pl-94 | padding-left: 23.5rem; |
| pl-95 | padding-left: 23.75rem; |
| pl-96 | padding-left: 24rem; |
| pl-97 | padding-left: 24.25rem; |
| pl-98 | padding-left: 24.5rem; |
| pl-99 | padding-left: 24.75rem; |
| pl-100 | padding-left: 25rem; |
| pl-auto | padding-left: auto; |
This example sets the left padding to 2rem. The element will have space inside it on the left side.
6
<div class="stripes"> <div class="p-8"> <p class="bg-indigo tc-white pl-6">6</p> </div></div>Padding Right
Controls the right padding of an element.
| Class | Properties |
|---|---|
| pr-0 | padding-right: 0rem; |
| pr-1 | padding-right: 0.25rem; |
| pr-2 | padding-right: 0.5rem; |
| pr-3 | padding-right: 0.75rem; |
| pr-4 | padding-right: 1rem; |
| pr-5 | padding-right: 1.25rem; |
| pr-6 | padding-right: 1.5rem; |
| pr-7 | padding-right: 1.75rem; |
| pr-8 | padding-right: 2rem; |
| pr-9 | padding-right: 2.25rem; |
| pr-10 | padding-right: 2.5rem; |
| pr-11 | padding-right: 2.75rem; |
| pr-12 | padding-right: 3rem; |
| pr-13 | padding-right: 3.25rem; |
| pr-14 | padding-right: 3.5rem; |
| pr-15 | padding-right: 3.75rem; |
| pr-16 | padding-right: 4rem; |
| pr-17 | padding-right: 4.25rem; |
| pr-18 | padding-right: 4.5rem; |
| pr-19 | padding-right: 4.75rem; |
| pr-20 | padding-right: 5rem; |
| pr-21 | padding-right: 5.25rem; |
| pr-22 | padding-right: 5.5rem; |
| pr-23 | padding-right: 5.75rem; |
| pr-24 | padding-right: 6rem; |
| pr-25 | padding-right: 6.25rem; |
| pr-26 | padding-right: 6.5rem; |
| pr-27 | padding-right: 6.75rem; |
| pr-28 | padding-right: 7rem; |
| pr-29 | padding-right: 7.25rem; |
| pr-30 | padding-right: 7.5rem; |
| pr-31 | padding-right: 7.75rem; |
| pr-32 | padding-right: 8rem; |
| pr-33 | padding-right: 8.25rem; |
| pr-34 | padding-right: 8.5rem; |
| pr-35 | padding-right: 8.75rem; |
| pr-36 | padding-right: 9rem; |
| pr-37 | padding-right: 9.25rem; |
| pr-38 | padding-right: 9.5rem; |
| pr-39 | padding-right: 9.75rem; |
| pr-40 | padding-right: 10rem; |
| pr-41 | padding-right: 10.25rem; |
| pr-42 | padding-right: 10.5rem; |
| pr-43 | padding-right: 10.75rem; |
| pr-44 | padding-right: 11rem; |
| pr-45 | padding-right: 11.25rem; |
| pr-46 | padding-right: 11.5rem; |
| pr-47 | padding-right: 11.75rem; |
| pr-48 | padding-right: 12rem; |
| pr-49 | padding-right: 12.25rem; |
| pr-50 | padding-right: 12.5rem; |
| pr-51 | padding-right: 12.75rem; |
| pr-52 | padding-right: 13rem; |
| pr-53 | padding-right: 13.25rem; |
| pr-54 | padding-right: 13.5rem; |
| pr-55 | padding-right: 13.75rem; |
| pr-56 | padding-right: 14rem; |
| pr-57 | padding-right: 14.25rem; |
| pr-58 | padding-right: 14.5rem; |
| pr-59 | padding-right: 14.75rem; |
| pr-60 | padding-right: 15rem; |
| pr-61 | padding-right: 15.25rem; |
| pr-62 | padding-right: 15.5rem; |
| pr-63 | padding-right: 15.75rem; |
| pr-64 | padding-right: 16rem; |
| pr-65 | padding-right: 16.25rem; |
| pr-66 | padding-right: 16.5rem; |
| pr-67 | padding-right: 16.75rem; |
| pr-68 | padding-right: 17rem; |
| pr-69 | padding-right: 17.25rem; |
| pr-70 | padding-right: 17.5rem; |
| pr-71 | padding-right: 17.75rem; |
| pr-72 | padding-right: 18rem; |
| pr-73 | padding-right: 18.25rem; |
| pr-74 | padding-right: 18.5rem; |
| pr-75 | padding-right: 18.75rem; |
| pr-76 | padding-right: 19rem; |
| pr-77 | padding-right: 19.25rem; |
| pr-78 | padding-right: 19.5rem; |
| pr-79 | padding-right: 19.75rem; |
| pr-80 | padding-right: 20rem; |
| pr-81 | padding-right: 20.25rem; |
| pr-82 | padding-right: 20.5rem; |
| pr-83 | padding-right: 20.75rem; |
| pr-84 | padding-right: 21rem; |
| pr-85 | padding-right: 21.25rem; |
| pr-86 | padding-right: 21.5rem; |
| pr-87 | padding-right: 21.75rem; |
| pr-88 | padding-right: 22rem; |
| pr-89 | padding-right: 22.25rem; |
| pr-90 | padding-right: 22.5rem; |
| pr-91 | padding-right: 22.75rem; |
| pr-92 | padding-right: 23rem; |
| pr-93 | padding-right: 23.25rem; |
| pr-94 | padding-right: 23.5rem; |
| pr-95 | padding-right: 23.75rem; |
| pr-96 | padding-right: 24rem; |
| pr-97 | padding-right: 24.25rem; |
| pr-98 | padding-right: 24.5rem; |
| pr-99 | padding-right: 24.75rem; |
| pr-100 | padding-right: 25rem; |
| pr-auto | padding-right: auto; |
This example sets the right padding to 2rem. The element will have space inside it on the right side.
6
<div class="stripes"> <div class="p-8"> <p class="bg-indigo tc-white pr-6">6</p> </div></div>Padding Top
Controls the top padding of an element.
| Class | Properties |
|---|---|
| pt-0 | padding-top: 0rem; |
| pt-1 | padding-top: 0.25rem; |
| pt-2 | padding-top: 0.5rem; |
| pt-3 | padding-top: 0.75rem; |
| pt-4 | padding-top: 1rem; |
| pt-5 | padding-top: 1.25rem; |
| pt-6 | padding-top: 1.5rem; |
| pt-7 | padding-top: 1.75rem; |
| pt-8 | padding-top: 2rem; |
| pt-9 | padding-top: 2.25rem; |
| pt-10 | padding-top: 2.5rem; |
| pt-11 | padding-top: 2.75rem; |
| pt-12 | padding-top: 3rem; |
| pt-13 | padding-top: 3.25rem; |
| pt-14 | padding-top: 3.5rem; |
| pt-15 | padding-top: 3.75rem; |
| pt-16 | padding-top: 4rem; |
| pt-17 | padding-top: 4.25rem; |
| pt-18 | padding-top: 4.5rem; |
| pt-19 | padding-top: 4.75rem; |
| pt-20 | padding-top: 5rem; |
| pt-21 | padding-top: 5.25rem; |
| pt-22 | padding-top: 5.5rem; |
| pt-23 | padding-top: 5.75rem; |
| pt-24 | padding-top: 6rem; |
| pt-25 | padding-top: 6.25rem; |
| pt-26 | padding-top: 6.5rem; |
| pt-27 | padding-top: 6.75rem; |
| pt-28 | padding-top: 7rem; |
| pt-29 | padding-top: 7.25rem; |
| pt-30 | padding-top: 7.5rem; |
| pt-31 | padding-top: 7.75rem; |
| pt-32 | padding-top: 8rem; |
| pt-33 | padding-top: 8.25rem; |
| pt-34 | padding-top: 8.5rem; |
| pt-35 | padding-top: 8.75rem; |
| pt-36 | padding-top: 9rem; |
| pt-37 | padding-top: 9.25rem; |
| pt-38 | padding-top: 9.5rem; |
| pt-39 | padding-top: 9.75rem; |
| pt-40 | padding-top: 10rem; |
| pt-41 | padding-top: 10.25rem; |
| pt-42 | padding-top: 10.5rem; |
| pt-43 | padding-top: 10.75rem; |
| pt-44 | padding-top: 11rem; |
| pt-45 | padding-top: 11.25rem; |
| pt-46 | padding-top: 11.5rem; |
| pt-47 | padding-top: 11.75rem; |
| pt-48 | padding-top: 12rem; |
| pt-49 | padding-top: 12.25rem; |
| pt-50 | padding-top: 12.5rem; |
| pt-51 | padding-top: 12.75rem; |
| pt-52 | padding-top: 13rem; |
| pt-53 | padding-top: 13.25rem; |
| pt-54 | padding-top: 13.5rem; |
| pt-55 | padding-top: 13.75rem; |
| pt-56 | padding-top: 14rem; |
| pt-57 | padding-top: 14.25rem; |
| pt-58 | padding-top: 14.5rem; |
| pt-59 | padding-top: 14.75rem; |
| pt-60 | padding-top: 15rem; |
| pt-61 | padding-top: 15.25rem; |
| pt-62 | padding-top: 15.5rem; |
| pt-63 | padding-top: 15.75rem; |
| pt-64 | padding-top: 16rem; |
| pt-65 | padding-top: 16.25rem; |
| pt-66 | padding-top: 16.5rem; |
| pt-67 | padding-top: 16.75rem; |
| pt-68 | padding-top: 17rem; |
| pt-69 | padding-top: 17.25rem; |
| pt-70 | padding-top: 17.5rem; |
| pt-71 | padding-top: 17.75rem; |
| pt-72 | padding-top: 18rem; |
| pt-73 | padding-top: 18.25rem; |
| pt-74 | padding-top: 18.5rem; |
| pt-75 | padding-top: 18.75rem; |
| pt-76 | padding-top: 19rem; |
| pt-77 | padding-top: 19.25rem; |
| pt-78 | padding-top: 19.5rem; |
| pt-79 | padding-top: 19.75rem; |
| pt-80 | padding-top: 20rem; |
| pt-81 | padding-top: 20.25rem; |
| pt-82 | padding-top: 20.5rem; |
| pt-83 | padding-top: 20.75rem; |
| pt-84 | padding-top: 21rem; |
| pt-85 | padding-top: 21.25rem; |
| pt-86 | padding-top: 21.5rem; |
| pt-87 | padding-top: 21.75rem; |
| pt-88 | padding-top: 22rem; |
| pt-89 | padding-top: 22.25rem; |
| pt-90 | padding-top: 22.5rem; |
| pt-91 | padding-top: 22.75rem; |
| pt-92 | padding-top: 23rem; |
| pt-93 | padding-top: 23.25rem; |
| pt-94 | padding-top: 23.5rem; |
| pt-95 | padding-top: 23.75rem; |
| pt-96 | padding-top: 24rem; |
| pt-97 | padding-top: 24.25rem; |
| pt-98 | padding-top: 24.5rem; |
| pt-99 | padding-top: 24.75rem; |
| pt-100 | padding-top: 25rem; |
| pt-auto | padding-top: auto; |
This example sets the top padding to 2rem. The element will have space inside it at the top.
6
<div class="stripes"> <div class="p-8"> <p class="bg-indigo tc-white pt-6">6</p> </div></div>Padding X
Controls the left and right paddings of an element at once.
| Class | Properties |
|---|---|
| px-0 | padding-left: 0rem;
padding-right: 0rem; |
| px-1 | padding-left: 0.25rem;
padding-right: 0.25rem; |
| px-2 | padding-left: 0.5rem;
padding-right: 0.5rem; |
| px-3 | padding-left: 0.75rem;
padding-right: 0.75rem; |
| px-4 | padding-left: 1rem;
padding-right: 1rem; |
| px-5 | padding-left: 1.25rem;
padding-right: 1.25rem; |
| px-6 | padding-left: 1.5rem;
padding-right: 1.5rem; |
| px-7 | padding-left: 1.75rem;
padding-right: 1.75rem; |
| px-8 | padding-left: 2rem;
padding-right: 2rem; |
| px-9 | padding-left: 2.25rem;
padding-right: 2.25rem; |
| px-10 | padding-left: 2.5rem;
padding-right: 2.5rem; |
| px-11 | padding-left: 2.75rem;
padding-right: 2.75rem; |
| px-12 | padding-left: 3rem;
padding-right: 3rem; |
| px-13 | padding-left: 3.25rem;
padding-right: 3.25rem; |
| px-14 | padding-left: 3.5rem;
padding-right: 3.5rem; |
| px-15 | padding-left: 3.75rem;
padding-right: 3.75rem; |
| px-16 | padding-left: 4rem;
padding-right: 4rem; |
| px-17 | padding-left: 4.25rem;
padding-right: 4.25rem; |
| px-18 | padding-left: 4.5rem;
padding-right: 4.5rem; |
| px-19 | padding-left: 4.75rem;
padding-right: 4.75rem; |
| px-20 | padding-left: 5rem;
padding-right: 5rem; |
| px-21 | padding-left: 5.25rem;
padding-right: 5.25rem; |
| px-22 | padding-left: 5.5rem;
padding-right: 5.5rem; |
| px-23 | padding-left: 5.75rem;
padding-right: 5.75rem; |
| px-24 | padding-left: 6rem;
padding-right: 6rem; |
| px-25 | padding-left: 6.25rem;
padding-right: 6.25rem; |
| px-26 | padding-left: 6.5rem;
padding-right: 6.5rem; |
| px-27 | padding-left: 6.75rem;
padding-right: 6.75rem; |
| px-28 | padding-left: 7rem;
padding-right: 7rem; |
| px-29 | padding-left: 7.25rem;
padding-right: 7.25rem; |
| px-30 | padding-left: 7.5rem;
padding-right: 7.5rem; |
| px-31 | padding-left: 7.75rem;
padding-right: 7.75rem; |
| px-32 | padding-left: 8rem;
padding-right: 8rem; |
| px-33 | padding-left: 8.25rem;
padding-right: 8.25rem; |
| px-34 | padding-left: 8.5rem;
padding-right: 8.5rem; |
| px-35 | padding-left: 8.75rem;
padding-right: 8.75rem; |
| px-36 | padding-left: 9rem;
padding-right: 9rem; |
| px-37 | padding-left: 9.25rem;
padding-right: 9.25rem; |
| px-38 | padding-left: 9.5rem;
padding-right: 9.5rem; |
| px-39 | padding-left: 9.75rem;
padding-right: 9.75rem; |
| px-40 | padding-left: 10rem;
padding-right: 10rem; |
| px-41 | padding-left: 10.25rem;
padding-right: 10.25rem; |
| px-42 | padding-left: 10.5rem;
padding-right: 10.5rem; |
| px-43 | padding-left: 10.75rem;
padding-right: 10.75rem; |
| px-44 | padding-left: 11rem;
padding-right: 11rem; |
| px-45 | padding-left: 11.25rem;
padding-right: 11.25rem; |
| px-46 | padding-left: 11.5rem;
padding-right: 11.5rem; |
| px-47 | padding-left: 11.75rem;
padding-right: 11.75rem; |
| px-48 | padding-left: 12rem;
padding-right: 12rem; |
| px-49 | padding-left: 12.25rem;
padding-right: 12.25rem; |
| px-50 | padding-left: 12.5rem;
padding-right: 12.5rem; |
| px-51 | padding-left: 12.75rem;
padding-right: 12.75rem; |
| px-52 | padding-left: 13rem;
padding-right: 13rem; |
| px-53 | padding-left: 13.25rem;
padding-right: 13.25rem; |
| px-54 | padding-left: 13.5rem;
padding-right: 13.5rem; |
| px-55 | padding-left: 13.75rem;
padding-right: 13.75rem; |
| px-56 | padding-left: 14rem;
padding-right: 14rem; |
| px-57 | padding-left: 14.25rem;
padding-right: 14.25rem; |
| px-58 | padding-left: 14.5rem;
padding-right: 14.5rem; |
| px-59 | padding-left: 14.75rem;
padding-right: 14.75rem; |
| px-60 | padding-left: 15rem;
padding-right: 15rem; |
| px-61 | padding-left: 15.25rem;
padding-right: 15.25rem; |
| px-62 | padding-left: 15.5rem;
padding-right: 15.5rem; |
| px-63 | padding-left: 15.75rem;
padding-right: 15.75rem; |
| px-64 | padding-left: 16rem;
padding-right: 16rem; |
| px-65 | padding-left: 16.25rem;
padding-right: 16.25rem; |
| px-66 | padding-left: 16.5rem;
padding-right: 16.5rem; |
| px-67 | padding-left: 16.75rem;
padding-right: 16.75rem; |
| px-68 | padding-left: 17rem;
padding-right: 17rem; |
| px-69 | padding-left: 17.25rem;
padding-right: 17.25rem; |
| px-70 | padding-left: 17.5rem;
padding-right: 17.5rem; |
| px-71 | padding-left: 17.75rem;
padding-right: 17.75rem; |
| px-72 | padding-left: 18rem;
padding-right: 18rem; |
| px-73 | padding-left: 18.25rem;
padding-right: 18.25rem; |
| px-74 | padding-left: 18.5rem;
padding-right: 18.5rem; |
| px-75 | padding-left: 18.75rem;
padding-right: 18.75rem; |
| px-76 | padding-left: 19rem;
padding-right: 19rem; |
| px-77 | padding-left: 19.25rem;
padding-right: 19.25rem; |
| px-78 | padding-left: 19.5rem;
padding-right: 19.5rem; |
| px-79 | padding-left: 19.75rem;
padding-right: 19.75rem; |
| px-80 | padding-left: 20rem;
padding-right: 20rem; |
| px-81 | padding-left: 20.25rem;
padding-right: 20.25rem; |
| px-82 | padding-left: 20.5rem;
padding-right: 20.5rem; |
| px-83 | padding-left: 20.75rem;
padding-right: 20.75rem; |
| px-84 | padding-left: 21rem;
padding-right: 21rem; |
| px-85 | padding-left: 21.25rem;
padding-right: 21.25rem; |
| px-86 | padding-left: 21.5rem;
padding-right: 21.5rem; |
| px-87 | padding-left: 21.75rem;
padding-right: 21.75rem; |
| px-88 | padding-left: 22rem;
padding-right: 22rem; |
| px-89 | padding-left: 22.25rem;
padding-right: 22.25rem; |
| px-90 | padding-left: 22.5rem;
padding-right: 22.5rem; |
| px-91 | padding-left: 22.75rem;
padding-right: 22.75rem; |
| px-92 | padding-left: 23rem;
padding-right: 23rem; |
| px-93 | padding-left: 23.25rem;
padding-right: 23.25rem; |
| px-94 | padding-left: 23.5rem;
padding-right: 23.5rem; |
| px-95 | padding-left: 23.75rem;
padding-right: 23.75rem; |
| px-96 | padding-left: 24rem;
padding-right: 24rem; |
| px-97 | padding-left: 24.25rem;
padding-right: 24.25rem; |
| px-98 | padding-left: 24.5rem;
padding-right: 24.5rem; |
| px-99 | padding-left: 24.75rem;
padding-right: 24.75rem; |
| px-100 | padding-left: 25rem;
padding-right: 25rem; |
| px-auto | padding-left: auto;
padding-right: auto; |
This example sets the left and right padding to 2rem. The element will have uniform space on both sides inside it.
6
<div class="stripes"> <div class="p-8"> <p class="bg-indigo tc-white px-6">6</p> </div></div>Padding Y
Controls the bottom and top paddings of an element at once.
| Class | Properties |
|---|---|
| py-0 | padding-bottom: 0rem;
padding-top: 0rem; |
| py-1 | padding-bottom: 0.25rem;
padding-top: 0.25rem; |
| py-2 | padding-bottom: 0.5rem;
padding-top: 0.5rem; |
| py-3 | padding-bottom: 0.75rem;
padding-top: 0.75rem; |
| py-4 | padding-bottom: 1rem;
padding-top: 1rem; |
| py-5 | padding-bottom: 1.25rem;
padding-top: 1.25rem; |
| py-6 | padding-bottom: 1.5rem;
padding-top: 1.5rem; |
| py-7 | padding-bottom: 1.75rem;
padding-top: 1.75rem; |
| py-8 | padding-bottom: 2rem;
padding-top: 2rem; |
| py-9 | padding-bottom: 2.25rem;
padding-top: 2.25rem; |
| py-10 | padding-bottom: 2.5rem;
padding-top: 2.5rem; |
| py-11 | padding-bottom: 2.75rem;
padding-top: 2.75rem; |
| py-12 | padding-bottom: 3rem;
padding-top: 3rem; |
| py-13 | padding-bottom: 3.25rem;
padding-top: 3.25rem; |
| py-14 | padding-bottom: 3.5rem;
padding-top: 3.5rem; |
| py-15 | padding-bottom: 3.75rem;
padding-top: 3.75rem; |
| py-16 | padding-bottom: 4rem;
padding-top: 4rem; |
| py-17 | padding-bottom: 4.25rem;
padding-top: 4.25rem; |
| py-18 | padding-bottom: 4.5rem;
padding-top: 4.5rem; |
| py-19 | padding-bottom: 4.75rem;
padding-top: 4.75rem; |
| py-20 | padding-bottom: 5rem;
padding-top: 5rem; |
| py-21 | padding-bottom: 5.25rem;
padding-top: 5.25rem; |
| py-22 | padding-bottom: 5.5rem;
padding-top: 5.5rem; |
| py-23 | padding-bottom: 5.75rem;
padding-top: 5.75rem; |
| py-24 | padding-bottom: 6rem;
padding-top: 6rem; |
| py-25 | padding-bottom: 6.25rem;
padding-top: 6.25rem; |
| py-26 | padding-bottom: 6.5rem;
padding-top: 6.5rem; |
| py-27 | padding-bottom: 6.75rem;
padding-top: 6.75rem; |
| py-28 | padding-bottom: 7rem;
padding-top: 7rem; |
| py-29 | padding-bottom: 7.25rem;
padding-top: 7.25rem; |
| py-30 | padding-bottom: 7.5rem;
padding-top: 7.5rem; |
| py-31 | padding-bottom: 7.75rem;
padding-top: 7.75rem; |
| py-32 | padding-bottom: 8rem;
padding-top: 8rem; |
| py-33 | padding-bottom: 8.25rem;
padding-top: 8.25rem; |
| py-34 | padding-bottom: 8.5rem;
padding-top: 8.5rem; |
| py-35 | padding-bottom: 8.75rem;
padding-top: 8.75rem; |
| py-36 | padding-bottom: 9rem;
padding-top: 9rem; |
| py-37 | padding-bottom: 9.25rem;
padding-top: 9.25rem; |
| py-38 | padding-bottom: 9.5rem;
padding-top: 9.5rem; |
| py-39 | padding-bottom: 9.75rem;
padding-top: 9.75rem; |
| py-40 | padding-bottom: 10rem;
padding-top: 10rem; |
| py-41 | padding-bottom: 10.25rem;
padding-top: 10.25rem; |
| py-42 | padding-bottom: 10.5rem;
padding-top: 10.5rem; |
| py-43 | padding-bottom: 10.75rem;
padding-top: 10.75rem; |
| py-44 | padding-bottom: 11rem;
padding-top: 11rem; |
| py-45 | padding-bottom: 11.25rem;
padding-top: 11.25rem; |
| py-46 | padding-bottom: 11.5rem;
padding-top: 11.5rem; |
| py-47 | padding-bottom: 11.75rem;
padding-top: 11.75rem; |
| py-48 | padding-bottom: 12rem;
padding-top: 12rem; |
| py-49 | padding-bottom: 12.25rem;
padding-top: 12.25rem; |
| py-50 | padding-bottom: 12.5rem;
padding-top: 12.5rem; |
| py-51 | padding-bottom: 12.75rem;
padding-top: 12.75rem; |
| py-52 | padding-bottom: 13rem;
padding-top: 13rem; |
| py-53 | padding-bottom: 13.25rem;
padding-top: 13.25rem; |
| py-54 | padding-bottom: 13.5rem;
padding-top: 13.5rem; |
| py-55 | padding-bottom: 13.75rem;
padding-top: 13.75rem; |
| py-56 | padding-bottom: 14rem;
padding-top: 14rem; |
| py-57 | padding-bottom: 14.25rem;
padding-top: 14.25rem; |
| py-58 | padding-bottom: 14.5rem;
padding-top: 14.5rem; |
| py-59 | padding-bottom: 14.75rem;
padding-top: 14.75rem; |
| py-60 | padding-bottom: 15rem;
padding-top: 15rem; |
| py-61 | padding-bottom: 15.25rem;
padding-top: 15.25rem; |
| py-62 | padding-bottom: 15.5rem;
padding-top: 15.5rem; |
| py-63 | padding-bottom: 15.75rem;
padding-top: 15.75rem; |
| py-64 | padding-bottom: 16rem;
padding-top: 16rem; |
| py-65 | padding-bottom: 16.25rem;
padding-top: 16.25rem; |
| py-66 | padding-bottom: 16.5rem;
padding-top: 16.5rem; |
| py-67 | padding-bottom: 16.75rem;
padding-top: 16.75rem; |
| py-68 | padding-bottom: 17rem;
padding-top: 17rem; |
| py-69 | padding-bottom: 17.25rem;
padding-top: 17.25rem; |
| py-70 | padding-bottom: 17.5rem;
padding-top: 17.5rem; |
| py-71 | padding-bottom: 17.75rem;
padding-top: 17.75rem; |
| py-72 | padding-bottom: 18rem;
padding-top: 18rem; |
| py-73 | padding-bottom: 18.25rem;
padding-top: 18.25rem; |
| py-74 | padding-bottom: 18.5rem;
padding-top: 18.5rem; |
| py-75 | padding-bottom: 18.75rem;
padding-top: 18.75rem; |
| py-76 | padding-bottom: 19rem;
padding-top: 19rem; |
| py-77 | padding-bottom: 19.25rem;
padding-top: 19.25rem; |
| py-78 | padding-bottom: 19.5rem;
padding-top: 19.5rem; |
| py-79 | padding-bottom: 19.75rem;
padding-top: 19.75rem; |
| py-80 | padding-bottom: 20rem;
padding-top: 20rem; |
| py-81 | padding-bottom: 20.25rem;
padding-top: 20.25rem; |
| py-82 | padding-bottom: 20.5rem;
padding-top: 20.5rem; |
| py-83 | padding-bottom: 20.75rem;
padding-top: 20.75rem; |
| py-84 | padding-bottom: 21rem;
padding-top: 21rem; |
| py-85 | padding-bottom: 21.25rem;
padding-top: 21.25rem; |
| py-86 | padding-bottom: 21.5rem;
padding-top: 21.5rem; |
| py-87 | padding-bottom: 21.75rem;
padding-top: 21.75rem; |
| py-88 | padding-bottom: 22rem;
padding-top: 22rem; |
| py-89 | padding-bottom: 22.25rem;
padding-top: 22.25rem; |
| py-90 | padding-bottom: 22.5rem;
padding-top: 22.5rem; |
| py-91 | padding-bottom: 22.75rem;
padding-top: 22.75rem; |
| py-92 | padding-bottom: 23rem;
padding-top: 23rem; |
| py-93 | padding-bottom: 23.25rem;
padding-top: 23.25rem; |
| py-94 | padding-bottom: 23.5rem;
padding-top: 23.5rem; |
| py-95 | padding-bottom: 23.75rem;
padding-top: 23.75rem; |
| py-96 | padding-bottom: 24rem;
padding-top: 24rem; |
| py-97 | padding-bottom: 24.25rem;
padding-top: 24.25rem; |
| py-98 | padding-bottom: 24.5rem;
padding-top: 24.5rem; |
| py-99 | padding-bottom: 24.75rem;
padding-top: 24.75rem; |
| py-100 | padding-bottom: 25rem;
padding-top: 25rem; |
| py-auto | padding-bottom: auto;
padding-top: auto; |
This example sets the bottom and top to 2rem. The element will have uniform space above and below its content.
6
<div class="stripes"> <div class="p-8"> <p class="bg-indigo tc-white py-6">6</p> </div></div>Conditional styles
Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.
Media modifiers
You can combine responsive breakpoints like sm:p-*,md:p-*, lg:p-*, and xxl:p-* allows targeting specific utilities in different viewports.
<div class="p-1 md:p-2 ..."></div> Hover modifiers
Alternatively, you can apply :hover by using h:p-* utility to override elements and change their values when hovering over them.
<div class="p-1 h:p-2 ..."></div>