pl-* — single-side padding for left edges. This family contains 35 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
pl-0 | padding-left: 0px; |
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-14 | padding-left: 3.5rem; |
pl-16 | padding-left: 4rem; |
pl-20 | padding-left: 5rem; |
pl-24 | padding-left: 6rem; |
pl-28 | padding-left: 7rem; |
pl-32 | padding-left: 8rem; |
pl-36 | padding-left: 9rem; |
pl-40 | padding-left: 10rem; |
pl-44 | padding-left: 11rem; |
pl-48 | padding-left: 12rem; |
pl-52 | padding-left: 13rem; |
pl-56 | padding-left: 14rem; |
pl-60 | padding-left: 15rem; |
pl-64 | padding-left: 16rem; |
pl-72 | padding-left: 18rem; |
pl-80 | padding-left: 20rem; |
pl-96 | padding-left: 24rem; |
pl-px | padding-left: 1px; |
pl-0.5 | padding-left: 0.125rem; |
pl-1.5 | padding-left: 0.375rem; |
pl-2.5 | padding-left: 0.625rem; |
pl-3.5 | padding-left: 0.875rem; |
Example#
example
<blockquote class="pl-4 border-l-4 border-blue-500">…</blockquote>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#
- pl-4 + border-l-4 = instant blockquote styling
Related#
utilities/spacing/spacing-scale|Spacing scale · utilities/sizing/width|Width · comparisons/margin-vs-padding|Margin vs padding