pr-* — single-side padding for right edges. This family contains 35 generated classes in Nakshora 3.1.

Classes#

ClassGenerated CSS
pr-0padding-right: 0px;
pr-1padding-right: 0.25rem;
pr-2padding-right: 0.5rem;
pr-3padding-right: 0.75rem;
pr-4padding-right: 1rem;
pr-5padding-right: 1.25rem;
pr-6padding-right: 1.5rem;
pr-7padding-right: 1.75rem;
pr-8padding-right: 2rem;
pr-9padding-right: 2.25rem;
pr-10padding-right: 2.5rem;
pr-11padding-right: 2.75rem;
pr-12padding-right: 3rem;
pr-14padding-right: 3.5rem;
pr-16padding-right: 4rem;
pr-20padding-right: 5rem;
pr-24padding-right: 6rem;
pr-28padding-right: 7rem;
pr-32padding-right: 8rem;
pr-36padding-right: 9rem;
pr-40padding-right: 10rem;
pr-44padding-right: 11rem;
pr-48padding-right: 12rem;
pr-52padding-right: 13rem;
pr-56padding-right: 14rem;
pr-60padding-right: 15rem;
pr-64padding-right: 16rem;
pr-72padding-right: 18rem;
pr-80padding-right: 20rem;
pr-96padding-right: 24rem;
pr-pxpadding-right: 1px;
pr-0.5padding-right: 0.125rem;
pr-1.5padding-right: 0.375rem;
pr-2.5padding-right: 0.625rem;
pr-3.5padding-right: 0.875rem;

Example#

example
html
<input class="pr-10" /> <!-- room for a trailing icon -->

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#

  • Reserve icon gutters with pr-10

utilities/spacing/spacing-scale|Spacing scale · utilities/sizing/width|Width · comparisons/margin-vs-padding|Margin vs padding