px-* sets padding-left + padding-right in one class. This family contains 35 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
px-0 | padding-left: 0px; padding-right: 0px; |
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-14 | padding-left: 3.5rem; padding-right: 3.5rem; |
px-16 | padding-left: 4rem; padding-right: 4rem; |
px-20 | padding-left: 5rem; padding-right: 5rem; |
px-24 | padding-left: 6rem; padding-right: 6rem; |
px-28 | padding-left: 7rem; padding-right: 7rem; |
px-32 | padding-left: 8rem; padding-right: 8rem; |
px-36 | padding-left: 9rem; padding-right: 9rem; |
px-40 | padding-left: 10rem; padding-right: 10rem; |
px-44 | padding-left: 11rem; padding-right: 11rem; |
px-48 | padding-left: 12rem; padding-right: 12rem; |
px-52 | padding-left: 13rem; padding-right: 13rem; |
px-56 | padding-left: 14rem; padding-right: 14rem; |
px-60 | padding-left: 15rem; padding-right: 15rem; |
px-64 | padding-left: 16rem; padding-right: 16rem; |
px-72 | padding-left: 18rem; padding-right: 18rem; |
px-80 | padding-left: 20rem; padding-right: 20rem; |
px-96 | padding-left: 24rem; padding-right: 24rem; |
px-px | padding-left: 1px; padding-right: 1px; |
px-0.5 | padding-left: 0.125rem; padding-right: 0.125rem; |
px-1.5 | padding-left: 0.375rem; padding-right: 0.375rem; |
px-2.5 | padding-left: 0.625rem; padding-right: 0.625rem; |
px-3.5 | padding-left: 0.875rem; padding-right: 0.875rem; |
Example#
example
<button class="px-5 py-2.5 rounded-lg">Balanced button</button>Responsive & variants#
Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.
Best practices#
- px pairs with py for button rhythm: px-5 py-2.5
- Use px alone to widen a chip without growing its height
Related#
utilities/spacing/spacing-scale|Spacing scale · utilities/sizing/width|Width · comparisons/margin-vs-padding|Margin vs padding