Tailwind CSS - Scroll Padding

Previous
Quiz
Next

Tailwind CSS Scroll Padding is a collection of predefined classes that control the padding around elements when they are scrolled into view, improving their visibility and positioning within the scrollable area.

Tailwind CSS Scroll Padding Classes

Below is a list of Tailwind CSS Scroll Padding classes for controlling the space around content in scrollable areas.

Class CSS Properties
scroll-p-0 scroll-padding: 0px;
scroll-px-0 scroll-padding-left: 0px;
scroll-padding-right: 0px;
scroll-py-0 scroll-padding-top: 0px;
scroll-padding-bottom: 0px;
scroll-ps-0 scroll-padding-inline-start: 0px;
scroll-pe-0 scroll-padding-inline-end: 0px;
scroll-pt-0 scroll-padding-top: 0px;
scroll-pr-0 scroll-padding-right: 0px;
scroll-pb-0 scroll-padding-bottom: 0px;
scroll-pl-0 scroll-padding-left: 0px;
scroll-p-px scroll-padding: 1px;
scroll-px-px scroll-padding-left: 1px;
scroll-padding-right: 1px;
scroll-py-px scroll-padding-top: 1px;
scroll-padding-bottom: 1px;
scroll-ps-px scroll-padding-inline-start: 1px;
scroll-pe-px scroll-padding-inline-end: 1px;
scroll-pt-px scroll-padding-top: 1px;
scroll-pr-px scroll-padding-right: 1px;
scroll-pb-px scroll-padding-bottom: 1px;
scroll-pl-px scroll-padding-left: 1px;
scroll-p-0.5 scroll-padding: 0.125rem; /* 2px */
scroll-px-0.5 scroll-padding-left: 0.125rem; /* 2px */
scroll-padding-right: 0.125rem; /* 2px */
scroll-py-0.5 scroll-padding-top: 0.125rem; /* 2px */
scroll-padding-bottom: 0.125rem; /* 2px */
scroll-ps-0.5 scroll-padding-inline-start: 0.125rem; /* 2px */
scroll-pe-0.5 scroll-padding-inline-end: 0.125rem; /* 2px */
scroll-pt-0.5 scroll-padding-top: 0.125rem; /* 2px */
scroll-pr-0.5 scroll-padding-right: 0.125rem; /* 2px */
scroll-pb-0.5 scroll-padding-bottom: 0.125rem; /* 2px */
scroll-pl-0.5 scroll-padding-left: 0.125rem; /* 2px */
scroll-p-1 scroll-padding: 0.25rem; /* 4px */
scroll-px-1 scroll-padding-left: 0.25rem; /* 4px */
scroll-padding-right: 0.25rem; /* 4px */
scroll-py-1 scroll-padding-top: 0.25rem; /* 4px */
scroll-padding-bottom: 0.25rem; /* 4px */
scroll-ps-1 scroll-padding-inline-start: 0.25rem; /* 4px */
scroll-pe-1 scroll-padding-inline-end: 0.25rem; /* 4px */
scroll-pt-1 scroll-padding-top: 0.25rem; /* 4px */
scroll-pr-1 scroll-padding-right: 0.25rem; /* 4px */
scroll-pb-1 scroll-padding-bottom: 0.25rem; /* 4px */
scroll-pl-1 scroll-padding-left: 0.25rem; /* 4px */
scroll-p-1.5 scroll-padding: 0.375rem; /* 6px */
scroll-px-1.5 scroll-padding-left: 0.375rem; /* 6px */
scroll-padding-right: 0.375rem; /* 6px */
scroll-py-1.5 scroll-padding-top: 0.375rem; /* 6px */
scroll-padding-bottom: 0.375rem; /* 6px */
scroll-ps-1.5 scroll-padding-inline-start: 0.375rem; /* 6px */
scroll-pe-1.5 scroll-padding-inline-end: 0.375rem; /* 6px */
scroll-pt-1.5 scroll-padding-top: 0.375rem; /* 6px */
scroll-pr-1.5 scroll-padding-right: 0.375rem; /* 6px */
scroll-pb-1.5 scroll-padding-bottom: 0.375rem; /* 6px */
scroll-pl-1.5 scroll-padding-left: 0.375rem; /* 6px */
scroll-p-2 scroll-padding: 0.5rem; /* 8px */
scroll-px-2 scroll-padding-left: 0.5rem; /* 8px */
scroll-padding-right: 0.5rem; /* 8px */
scroll-py-2 scroll-padding-top: 0.5rem; /* 8px */
scroll-padding-bottom: 0.5rem; /* 8px */
scroll-ps-2 scroll-padding-inline-start: 0.5rem; /* 8px */
scroll-pe-2 scroll-padding-inline-end: 0.5rem; /* 8px */
scroll-pt-2 scroll-padding-top: 0.5rem; /* 8px */
scroll-pr-2 scroll-padding-right: 0.5rem; /* 8px */
scroll-pb-2 scroll-padding-bottom: 0.5rem; /* 8px */
scroll-pl-2 scroll-padding-left: 0.5rem; /* 8px */
scroll-p-2.5 scroll-padding: 0.625rem; /* 10px */
scroll-px-2.5 scroll-padding-left: 0.625rem; /* 10px */
scroll-padding-right: 0.625rem; /* 10px */
scroll-py-2.5 scroll-padding-top: 0.625rem; /* 10px */
scroll-padding-bottom: 0.625rem; /* 10px */
scroll-ps-2.5 scroll-padding-inline-start: 0.625rem; /* 10px */
scroll-pe-2.5 scroll-padding-inline-end: 0.625rem; /* 10px */
scroll-pt-2.5 scroll-padding-top: 0.625rem; /* 10px */
scroll-pr-2.5 scroll-padding-right: 0.625rem; /* 10px */
scroll-pb-2.5 scroll-padding-bottom: 0.625rem; /* 10px */
scroll-pl-2.5 scroll-padding-left: 0.625rem; /* 10px */
scroll-p-3 scroll-padding: 0.75rem; /* 12px */
scroll-px-3 scroll-padding-left: 0.75rem; /* 12px */
scroll-padding-right: 0.75rem; /* 12px */
scroll-py-3 scroll-padding-top: 0.75rem; /* 12px */
scroll-padding-bottom: 0.75rem; /* 12px */
scroll-ps-3 scroll-padding-inline-start: 0.75rem; /* 12px */
scroll-pe-3 scroll-padding-inline-end: 0.75rem; /* 12px */
scroll-pt-3 scroll-padding-top: 0.75rem; /* 12px */
scroll-pr-3 scroll-padding-right: 0.75rem; /* 12px */
scroll-pb-3 scroll-padding-bottom: 0.75rem; /* 12px */
scroll-pl-3 scroll-padding-left: 0.75rem; /* 12px */
scroll-p-3.5 scroll-padding: 0.875rem; /* 14px */
scroll-px-3.5 scroll-padding-left: 0.875rem; /* 14px */
scroll-padding-right: 0.875rem; /* 14px */
scroll-py-3.5 scroll-padding-top: 0.875rem; /* 14px */
scroll-padding-bottom: 0.875rem; /* 14px */
scroll-ps-3.5 scroll-padding-inline-start: 0.875rem; /* 14px */
scroll-pe-3.5 scroll-padding-inline-end: 0.875rem; /* 14px */
scroll-pt-3.5 scroll-padding-top: 0.875rem; /* 14px */
scroll-pr-3.5 scroll-padding-right: 0.875rem; /* 14px */
scroll-pb-3.5 scroll-padding-bottom: 0.875rem; /* 14px */
scroll-pl-3.5 scroll-padding-left: 0.875rem; /* 14px */
scroll-p-4 scroll-padding: 1rem; /* 16px */
scroll-px-4 scroll-padding-left: 1rem; /* 16px */
scroll-padding-right: 1rem; /* 16px */
scroll-py-4 scroll-padding-top: 1rem; /* 16px */
scroll-padding-bottom: 1rem; /* 16px */
scroll-ps-4 scroll-padding-inline-start: 1rem; /* 16px */
scroll-pe-4 scroll-padding-inline-end: 1rem; /* 16px */
scroll-pt-4 scroll-padding-top: 1rem; /* 16px */
scroll-pr-4 scroll-padding-right: 1rem; /* 16px */
scroll-pb-4 scroll-padding-bottom: 1rem; /* 16px */
scroll-pl-4 scroll-padding-left: 1rem; /* 16px */
scroll-p-5 scroll-padding: 1.25rem; /* 20px */
scroll-px-5 scroll-padding-left: 1.25rem; /* 20px */
scroll-padding-right: 1.25rem; /* 20px */
scroll-py-5 scroll-padding-top: 1.25rem; /* 20px */
scroll-padding-bottom: 1.25rem; /* 20px */
scroll-ps-5 scroll-padding-inline-start: 1.25rem; /* 20px */
scroll-pe-5 scroll-padding-inline-end: 1.25rem; /* 20px */
scroll-pt-5 scroll-padding-top: 1.25rem; /* 20px */
scroll-pr-5 scroll-padding-right: 1.25rem; /* 20px */
scroll-pb-5 scroll-padding-bottom: 1.25rem; /* 20px */
scroll-pl-5 scroll-padding-left: 1.25rem; /* 20px */
scroll-p-6 scroll-padding: 1.5rem; /* 24px */
scroll-px-6 scroll-padding-left: 1.5rem; /* 24px */
scroll-padding-right: 1.5rem; /* 24px */
scroll-py-6 scroll-padding-top: 1.5rem; /* 24px */
scroll-padding-bottom: 1.5rem; /* 24px */
scroll-ps-6 scroll-padding-inline-start: 1.5rem; /* 24px */
scroll-pe-6 scroll-padding-inline-end: 1.5rem; /* 24px */
scroll-pt-6 scroll-padding-top: 1.5rem; /* 24px */
scroll-pr-6 scroll-padding-right: 1.5rem; /* 24px */
scroll-pb-6 scroll-padding-bottom: 1.5rem; /* 24px */
scroll-pl-6 scroll-padding-left: 1.5rem; /* 24px */
scroll-p-7 scroll-padding: 1.75rem; /* 28px */
scroll-px-7 scroll-padding-left: 1.75rem; /* 28px */
scroll-padding-right: 1.75rem; /* 28px */
scroll-py-7 scroll-padding-top: 1.75rem; /* 28px */
scroll-padding-bottom: 1.75rem; /* 28px */
scroll-ps-7 scroll-padding-inline-start: 1.75rem; /* 28px */
scroll-pe-7 scroll-padding-inline-end: 1.75rem; /* 28px */
scroll-pt-7 scroll-padding-top: 1.75rem; /* 28px */
scroll-pr-7 scroll-padding-right: 1.75rem; /* 28px */
scroll-pb-7 scroll-padding-bottom: 1.75rem; /* 28px */
scroll-pl-7 scroll-padding-left: 1.75rem; /* 28px */
scroll-p-8 scroll-padding: 2rem; /* 32px */
scroll-px-8 scroll-padding-left: 2rem; /* 32px */
scroll-padding-right: 2rem; /* 32px */
scroll-py-8 scroll-padding-top: 2rem; /* 32px */
scroll-padding-bottom: 2rem; /* 32px */
scroll-ps-8 scroll-padding-inline-start: 2rem; /* 32px */
scroll-pe-8 scroll-padding-inline-end: 2rem; /* 32px */
scroll-pt-8 scroll-padding-top: 2rem; /* 32px */
scroll-pr-8 scroll-padding-right: 2rem; /* 32px */
scroll-pb-8 scroll-padding-bottom: 2rem; /* 32px */
scroll-pl-8 scroll-padding-left: 2rem; /* 32px */
scroll-p-9 scroll-padding: 2.25rem; /* 36px */
scroll-px-9 scroll-padding-left: 2.25rem; /* 36px */
scroll-padding-right: 2.25rem; /* 36px */
scroll-py-9 scroll-padding-top: 2.25rem; /* 36px */
scroll-padding-bottom: 2.25rem; /* 36px */
scroll-ps-9 scroll-padding-inline-start: 2.25rem; /* 36px */
scroll-pe-9 scroll-padding-inline-end: 2.25rem; /* 36px */
scroll-pt-9 scroll-padding-top: 2.25rem; /* 36px */
scroll-pr-9 scroll-padding-right: 2.25rem; /* 36px */
scroll-pb-9 scroll-padding-bottom: 2.25rem; /* 36px */
scroll-pl-9 scroll-padding-left: 2.25rem; /* 36px */
scroll-p-10 scroll-padding: 2.5rem; /* 40px */
scroll-px-10 scroll-padding-left: 2.5rem; /* 40px */
scroll-padding-right: 2.5rem; /* 40px */
scroll-py-10 scroll-padding-top: 2.5rem; /* 40px */
scroll-padding-bottom: 2.5rem; /* 40px */
scroll-ps-10 scroll-padding-inline-start: 2.5rem; /* 40px */
scroll-pe-10 scroll-padding-inline-end: 2.5rem; /* 40px */
scroll-pt-10 scroll-padding-top: 2.5rem; /* 40px */
scroll-pr-10 scroll-padding-right: 2.5rem; /* 40px */
scroll-pb-10 scroll-padding-bottom: 2.5rem; /* 40px */
scroll-pl-10 scroll-padding-left: 2.5rem; /* 40px */
scroll-p-11 scroll-padding: 2.75rem; /* 44px */
scroll-px-11 scroll-padding-left: 2.75rem; /* 44px */
scroll-padding-right: 2.75rem; /* 44px */
scroll-py-11 scroll-padding-top: 2.75rem; /* 44px */
scroll-padding-bottom: 2.75rem; /* 44px */
scroll-ps-11 scroll-padding-inline-start: 2.75rem; /* 44px */
scroll-pe-11 scroll-padding-inline-end: 2.75rem; /* 44px */
scroll-pt-11 scroll-padding-top: 2.75rem; /* 44px */
scroll-pr-11 scroll-padding-right: 2.75rem; /* 44px */
scroll-pb-11 scroll-padding-bottom: 2.75rem; /* 44px */
scroll-pl-11 scroll-padding-left: 2.75rem; /* 44px */
scroll-p-12 scroll-padding: 3rem; /* 48px */
scroll-px-12 scroll-padding-left: 3rem; /* 48px */
scroll-padding-right: 3rem; /* 48px */
scroll-py-12 scroll-padding-top: 3rem; /* 48px */
scroll-padding-bottom: 3rem; /* 48px */
scroll-ps-12 scroll-padding-inline-start: 3rem; /* 48px */
scroll-pe-12 scroll-padding-inline-end: 3rem; /* 48px */
scroll-pt-12 scroll-padding-top: 3rem; /* 48px */
scroll-pr-12 scroll-padding-right: 3rem; /* 48px */
scroll-pb-12 scroll-padding-bottom: 3rem; /* 48px */
scroll-pl-12 scroll-padding-left: 3rem; /* 48px */
scroll-p-14 scroll-padding: 3.5rem; /* 56px */
scroll-px-14 scroll-padding-left: 3.5rem; /* 56px */
scroll-padding-right: 3.5rem; /* 56px */
scroll-py-14 scroll-padding-top: 3.5rem; /* 56px */
scroll-padding-bottom: 3.5rem; /* 56px */
scroll-ps-14 scroll-padding-inline-start: 3.5rem; /* 56px */
scroll-pe-14 scroll-padding-inline-end: 3.5rem; /* 56px */
scroll-pt-14 scroll-padding-top: 3.5rem; /* 56px */
scroll-pr-14 scroll-padding-right: 3.5rem; /* 56px */
scroll-pb-14 scroll-padding-bottom: 3.5rem; /* 56px */
scroll-pl-14 scroll-padding-left: 3.5rem; /* 56px */
scroll-p-16 scroll-padding: 4rem; /* 64px */
scroll-px-16 scroll-padding-left: 4rem; /* 64px */
scroll-padding-right: 4rem; /* 64px */
scroll-py-16 scroll-padding-top: 4rem; /* 64px */
scroll-padding-bottom: 4rem; /* 64px */
scroll-ps-16 scroll-padding-inline-start: 4rem; /* 64px */
scroll-pe-16 scroll-padding-inline-end: 4rem; /* 64px */
scroll-pt-16 scroll-padding-top: 4rem; /* 64px */
scroll-pr-16 scroll-padding-right: 4rem; /* 64px */
scroll-pb-16 scroll-padding-bottom: 4rem; /* 64px */
scroll-pl-16 scroll-padding-left: 4rem; /* 64px */
scroll-p-20 scroll-padding: 5rem; /* 80px */
scroll-px-20 scroll-padding-left: 5rem; /* 80px */
scroll-padding-right: 5rem; /* 80px */
scroll-py-20 scroll-padding-top: 5rem; /* 80px */
scroll-padding-bottom: 5rem; /* 80px */
scroll-ps-20 scroll-padding-inline-start: 5rem; /* 80px */
scroll-pe-20 scroll-padding-inline-end: 5rem; /* 80px */
scroll-pt-20 scroll-padding-top: 5rem; /* 80px */
scroll-pr-20 scroll-padding-right: 5rem; /* 80px */
scroll-pb-20 scroll-padding-bottom: 5rem; /* 80px */
scroll-pl-20 scroll-padding-left: 5rem; /* 80px */
scroll-p-24 scroll-padding: 6rem; /* 96px */
scroll-px-24 scroll-padding-left: 6rem; /* 96px */
scroll-padding-right: 6rem; /* 96px */
scroll-py-24 scroll-padding-top: 6rem; /* 96px */
scroll-padding-bottom: 6rem; /* 96px */
scroll-ps-24 scroll-padding-inline-start: 6rem; /* 96px */
scroll-pe-24 scroll-padding-inline-end: 6rem; /* 96px */
scroll-pt-24 scroll-padding-top: 6rem; /* 96px */
scroll-pr-24 scroll-padding-right: 6rem; /* 96px */
scroll-pb-24 scroll-padding-bottom: 6rem; /* 96px */
scroll-pl-24 scroll-padding-left: 6rem; /* 96px */
scroll-p-28 scroll-padding: 7rem; /* 112px */
scroll-px-28 scroll-padding-left: 7rem; /* 112px */
scroll-padding-right: 7rem; /* 112px */
scroll-py-28 scroll-padding-top: 7rem; /* 112px */
scroll-padding-bottom: 7rem; /* 112px */
scroll-ps-28 scroll-padding-inline-start: 7rem; /* 112px */
scroll-pe-28 scroll-padding-inline-end: 7rem; /* 112px */
scroll-pt-28 scroll-padding-top: 7rem; /* 112px */
scroll-pr-28 scroll-padding-right: 7rem; /* 112px */
scroll-pb-28 scroll-padding-bottom: 7rem; /* 112px */
scroll-pl-28 scroll-padding-left: 7rem; /* 112px */
scroll-p-32 scroll-padding: 8rem; /* 128px */
scroll-px-32 scroll-padding-left: 8rem; /* 128px */
scroll-padding-right: 8rem; /* 128px */
scroll-py-32 scroll-padding-top: 8rem; /* 128px */
scroll-padding-bottom: 8rem; /* 128px */
scroll-ps-32 scroll-padding-inline-start: 8rem; /* 128px */
scroll-pe-32 scroll-padding-inline-end: 8rem; /* 128px */
scroll-pt-32 scroll-padding-top: 8rem; /* 128px */
scroll-pr-32 scroll-padding-right: 8rem; /* 128px */
scroll-pb-32 scroll-padding-bottom: 8rem; /* 128px */
scroll-pl-32 scroll-padding-left: 8rem; /* 128px */
scroll-p-36 scroll-padding: 9rem; /* 144px */
scroll-px-36 scroll-padding-left: 9rem; /* 144px */
scroll-padding-right: 9rem; /* 144px */
scroll-py-36 scroll-padding-top: 9rem; /* 144px */
scroll-padding-bottom: 9rem; /* 144px */
scroll-ps-36 scroll-padding-inline-start: 9rem; /* 144px */
scroll-pe-36 scroll-padding-inline-end: 9rem; /* 144px */
scroll-pt-36 scroll-padding-top: 9rem; /* 144px */
scroll-pr-36 scroll-padding-right: 9rem; /* 144px */
scroll-pb-36 scroll-padding-bottom: 9rem; /* 144px */
scroll-pl-36 scroll-padding-left: 9rem; /* 144px */
scroll-p-40 scroll-padding: 10rem; /* 160px */
scroll-px-40 scroll-padding-left: 10rem; /* 160px */
scroll-padding-right: 10rem; /* 160px */
scroll-py-40 scroll-padding-top: 10rem; /* 160px */
scroll-padding-bottom: 10rem; /* 160px */
scroll-ps-40 scroll-padding-inline-start: 10rem; /* 160px */
scroll-pe-40 scroll-padding-inline-end: 10rem; /* 160px */
scroll-pt-40 scroll-padding-top: 10rem; /* 160px */
scroll-pr-40 scroll-padding-right: 10rem; /* 160px */
scroll-pb-40 scroll-padding-bottom: 10rem; /* 160px */
scroll-pl-40 scroll-padding-left: 10rem; /* 160px */
scroll-p-44 scroll-padding: 11rem; /* 176px */
scroll-px-44 scroll-padding-left: 11rem; /* 176px */
scroll-padding-right: 11rem; /* 176px */
scroll-py-44 scroll-padding-top: 11rem; /* 176px */
scroll-padding-bottom: 11rem; /* 176px */
scroll-ps-44 scroll-padding-inline-start: 11rem; /* 176px */
scroll-pe-44 scroll-padding-inline-end: 11rem; /* 176px */
scroll-pt-44 scroll-padding-top: 11rem; /* 176px */
scroll-pr-44 scroll-padding-right: 11rem; /* 176px */
scroll-p-48 scroll-padding: 12rem; /* 192px */
scroll-px-48 scroll-padding-left: 12rem; /* 192px */
scroll-padding-right: 12rem; /* 192px */
scroll-py-48 scroll-padding-top: 12rem; /* 192px */
scroll-padding-bottom: 12rem; /* 192px */
scroll-ps-48 scroll-padding-inline-start: 12rem; /* 192px */
scroll-pe-48 scroll-padding-inline-end: 12rem; /* 192px */
scroll-pt-48 scroll-padding-top: 12rem; /* 192px */
scroll-pr-48 scroll-padding-right: 12rem; /* 192px */
scroll-pb-48 scroll-padding-bottom: 12rem; /* 192px */
scroll-pl-48 scroll-padding-left: 12rem; /* 192px */
scroll-p-52 scroll-padding: 13rem; /* 208px */
scroll-px-52 scroll-padding-left: 13rem; /* 208px */
scroll-padding-right: 13rem; /* 208px */
scroll-py-52 scroll-padding-top: 13rem; /* 208px */
scroll-padding-bottom: 13rem; /* 208px */
scroll-ps-52 scroll-padding-inline-start: 13rem; /* 208px */
scroll-pe-52 scroll-padding-inline-end: 13rem; /* 208px */
scroll-pt-52 scroll-padding-top: 13rem; /* 208px */
scroll-pr-52 scroll-padding-right: 13rem; /* 208px */
scroll-pb-52 scroll-padding-bottom: 13rem; /* 208px */
scroll-pl-52 scroll-padding-left: 13rem; /* 208px */
scroll-p-56 scroll-padding: 14rem; /* 224px */
scroll-px-56 scroll-padding-left: 14rem; /* 224px */
scroll-padding-right: 14rem; /* 224px */
scroll-py-56 scroll-padding-top: 14rem; /* 224px */
scroll-padding-bottom: 14rem; /* 224px */
scroll-ps-56 scroll-padding-inline-start: 14rem; /* 224px */
scroll-pe-56 scroll-padding-inline-end: 14rem; /* 224px */
scroll-pt-56 scroll-padding-top: 14rem; /* 224px */
scroll-pr-56 scroll-padding-right: 14rem; /* 224px */
scroll-pb-56 scroll-padding-bottom: 14rem; /* 224px */
scroll-pl-56 scroll-padding-left: 14rem; /* 224px */
scroll-p-60 scroll-padding: 15rem; /* 240px */
scroll-px-60 scroll-padding-left: 15rem; /* 240px */
scroll-padding-right: 15rem; /* 240px */
scroll-py-60 scroll-padding-top: 15rem; /* 240px */
scroll-padding-bottom: 15rem; /* 240px */
scroll-ps-60 scroll-padding-inline-start: 15rem; /* 240px */
scroll-pe-60 scroll-padding-inline-end: 15rem; /* 240px */
scroll-pt-60 scroll-padding-top: 15rem; /* 240px */
scroll-pr-60 scroll-padding-right: 15rem; /* 240px */
scroll-pb-60 scroll-padding-bottom: 15rem; /* 240px */
scroll-pl-60 scroll-padding-left: 15rem; /* 240px */
scroll-p-64 scroll-padding: 16rem; /* 256px */
scroll-px-64 scroll-padding-left: 16rem; /* 256px */
scroll-padding-right: 16rem; /* 256px */
scroll-py-64 scroll-padding-top: 16rem; /* 256px */
scroll-padding-bottom: 16rem; /* 256px */
scroll-ps-64 scroll-padding-inline-start: 16rem; /* 256px */
scroll-pe-64 scroll-padding-inline-end: 16rem; /* 256px */
scroll-pt-64 scroll-padding-top: 16rem; /* 256px */
scroll-pr-64 scroll-padding-right: 16rem; /* 256px */
scroll-pb-64 scroll-padding-bottom: 16rem; /* 256px */
scroll-pl-64 scroll-padding-left: 16rem; /* 256px */
scroll-p-72 scroll-padding: 18rem; /* 288px */
scroll-px-72 scroll-padding-left: 18rem; /* 288px */
scroll-padding-right: 18rem; /* 288px */
scroll-py-72 scroll-padding-top: 18rem; /* 288px */
scroll-padding-bottom: 18rem; /* 288px */
scroll-ps-72 scroll-padding-inline-start: 18rem; /* 288px */
scroll-pe-72 scroll-padding-inline-end: 18rem; /* 288px */
scroll-pt-72 scroll-padding-top: 18rem; /* 288px */
scroll-pr-72 scroll-padding-right: 18rem; /* 288px */
scroll-pb-72 scroll-padding-bottom: 18rem; /* 288px */
scroll-pl-72 scroll-padding-left: 18rem; /* 288px */
scroll-p-80 scroll-padding: 20rem; /* 320px */
scroll-px-80 scroll-padding-left: 20rem; /* 320px */
scroll-padding-right: 20rem; /* 320px */
scroll-py-80 scroll-padding-top: 20rem; /* 320px */
scroll-padding-bottom: 20rem; /* 320px */
scroll-ps-80 scroll-padding-inline-start: 20rem; /* 320px */
scroll-pe-80 scroll-padding-inline-end: 20rem; /* 320px */
scroll-pt-80 scroll-padding-top: 20rem; /* 320px */
scroll-pr-80 scroll-padding-right: 20rem; /* 320px */
scroll-pb-80 scroll-padding-bottom: 20rem; /* 320px */
scroll-pl-80 scroll-padding-left: 20rem; /* 320px */
scroll-p-96 scroll-padding: 24rem; /* 384px */
scroll-px-96 scroll-padding-left: 24rem; /* 384px */
scroll-padding-right: 24rem; /* 384px */
scroll-py-96 scroll-padding-top: 24rem; /* 384px */
scroll-padding-bottom: 24rem; /* 384px */
scroll-ps-96 scroll-padding-inline-start: 24rem; /* 384px */
scroll-pe-96 scroll-padding-inline-end: 24rem; /* 384px */
scroll-pt-96 scroll-padding-top: 24rem; /* 384px */
scroll-pr-96 scroll-padding-right: 24rem; /* 384px */
scroll-pb-96 scroll-padding-bottom: 24rem; /* 384px */
scroll-pl-96 scroll-padding-left: 24rem; /* 384px */

Functionality of Tailwind CSS Scroll Padding Classes

  • scroll-p-*: Sets the scroll padding for all sides of an element.
  • scroll-px-*: Sets the horizontal scroll padding (left and right).
  • scroll-py-*: Sets the vertical scroll padding (top and bottom).
  • scroll-pt-*: Sets the top scroll padding.
  • scroll-pr-*: Sets the right scroll padding.
  • scroll-pb-*: Sets the bottom scroll padding.
  • scroll-pl-*: Sets the left scroll padding.
  • scroll-ps-*: Sets the scroll padding at the inline start (left in LTR languages).
  • scroll-pe-*: Sets the scroll padding at the inline end (right in LTR languages).

In scroll-(className)-*, the * can be replaced with size values such as 0, px, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, and 96.

Size Increments:

  • px: Size is 1px
  • 0.5 to 4: Increases by 2px
  • 4 to 12: Increases by 4px
  • 12 to 16: Increases by 8px
  • 16 to 64: Increases by 16px
  • 64 to 80: Increases by 32px
  • 80 to 96: Increases by 64px

Where 0 means no scroll padding and 96 means a scroll padding of 24rem (384px).

Tailwind CSS Scroll Padding Class Examples

Below are examples of Tailwind CSS Scroll Padding classes, which show how to set padding around elements to manage the space around them when they are scrolled into view, ensuring they are properly positioned and visible within the scrollable area.

Horizontal Scroll Padding with Tailwind CSS

This example shows the scroll-px-6 class, which adds padding to the left and right of each item within a horizontally scrollable container, creating extra space around the items while scrolling.

Example

  
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-4">
        Tailwind CSS Scroll Padding
    </h2>
    <h3 class="underline font-bold mb-4">
        Horizontal Scroll Padding Example
    </h3>
    <div class="scroll-px-6 px-6 flex overflow-x-auto border border-gray-300 
            bg-gray-100 p-2">
        <div class="flex-none w-60 h-40 bg-yellow-200 mr-4">
            <img src="https://picsum.photos/600/400?random=1"
                class="w-full h-full object-cover" alt="Placeholder Image">
        </div>
        <div class="flex-none w-60 h-40 bg-blue-200 mr-4">
            <img src="https://picsum.photos/600/400?random=2"
                class="w-full h-full object-cover" alt="Placeholder Image">
        </div>
        <div class="flex-none w-60 h-40 bg-green-200 mr-4">
            <img src="https://picsum.photos/600/400?random=3"
                class="w-full h-full object-cover" alt="Placeholder Image">
        </div>
        <div class="flex-none w-60 h-40 bg-red-200 mr-4">
            <img src="https://picsum.photos/600/400?random=4"
                class="w-full h-full object-cover" alt="Placeholder Image">
        </div>
        <div class="flex-none w-60 h-40 bg-purple-200 mr-4">
            <img src="https://picsum.photos/600/400?random=5" 
                class="w-full h-full object-cover" alt="Placeholder Image">
        </div>
    </div>
    <p class="mt-4 text-sm text-gray-700">
        Scroll horizontally to see the padding on the left 
        and right sides of each item due to <strong>scroll-px-6</strong>.
    </p>
</body>

</html>

Vertical Scroll Padding with Tailwind CSS

This example shows how the scroll-py-6 class adds padding to the top and bottom of each section within a vertically scrollable container, creating extra space around the sections while scrolling.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-4">
        Tailwind CSS Scroll Padding
    </h2>
    <h3 class="underline font-bold mb-4">
        Vertical Scroll Padding Example
    </h3>
    <div class="scroll-py-6 py-6 max-h-56 overflow-y-auto border 
        border-gray-300 bg-gray-100 p-2 scroll-py-6">
        <div class="h-40 bg-yellow-200 mb-4">
            <p class="p-4">First Section</p>
        </div>
        <div class="h-40 bg-blue-200 mb-4">
            <p class="p-4">Second Section</p>
        </div>
        <div class="h-40 bg-green-200 mb-4">
            <p class="p-4">Third Section</p>
        </div>
        <div class="h-40 bg-red-200 mb-4">
            <p class="p-4">Fourth Section</p>
        </div>
        <div class="h-40 bg-purple-200">
            <p class="p-4">Fifth Section</p>
        </div>
    </div>
    <p class="mt-4 text-sm text-gray-700">
        Scroll vertically to see the padding on 
        the top and bottom of each section due to
        <strong>scroll-py-6</strong>.
    </p>
</body>

</html>
Print Page
Previous
Next
Advertisements