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) |