Spacing
Padding
A wide range of shorthand responsive padding utility classes to modify an element’s appearance.
.pl-30
.pt-30
.pb-30
.pr-30
.px-30
.py-30
| Class | Values |
|---|---|
class="pa-[value]"class="pl-[value]"class="pt-[value]"class="pb-[value]"class="pr-[value]"class="px-[value]"class="py-[value]" | 0 / 5 / 10 / 15 / 20 ... / 100 (step of 5) |
Media Query Padding
A wide range of shorthand media query utility classes for xl, lg, md and sm sizes.
| Class | Values |
|---|---|
class="pa-[size]-[value]"class="pl-[size]-[value]"class="pt-[size]-[value]"class="pb-[size]-[value]"class="pr-[size]-[value]"class="px-[size]-[value]"class="py-[size]-[value]" | 0 / 5 / 10 / 15 / 20 ... / 100 (step of 5) |
Margin
A wide range of shorthand responsive margin utility classes to modify an element’s appearance.
.ml-30
.ml-50
| Class | Values |
|---|---|
class="ma-[value]"class="ml-[value]"class="mt-[value]"class="mb-[value]"class="mr-[value]"class="mx-[value]"class="my-[value]" | 0 / 5 / 10 / 15 / 20 ... / 100 (step of 5) |
Media Query Margin
A wide range of shorthand media query utility classes for xl, lg, md and sm sizes.
| Class | Values |
|---|---|
class="ma-[size]-[value]"class="ml-[size]-[value]"class="mt-[size]-[value]"class="mb-[size]-[value]"class="mr-[size]-[value]"class="mx-[size]-[value]"class="my-[size]-[value]" | 0 / 5 / 10 / 15 / 20 ... / 100 (step of 5) |