Scroll Padding - Tailwindcss

import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourSpacingScale, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { Stripes } from "@/components/stripes.tsx";

export const title = "scroll-padding"; export const description = "Utilities for controlling an element's scroll offset within a snap container.";

<ApiTable rows={[ ["scroll-p", "scroll-padding"], ["scroll-px", "scroll-padding-inline"], ["scroll-py", "scroll-padding-block"], ["scroll-ps", "scroll-padding-inline-start"], ["scroll-pe", "scroll-padding-inline-end"], ["scroll-pbs", "scroll-padding-block-start"], ["scroll-pbe", "scroll-padding-block-end"], ["scroll-pt", "scroll-padding-top"], ["scroll-pr", "scroll-padding-right"], ["scroll-pb", "scroll-padding-bottom"], ["scroll-pl", "scroll-padding-left"], ].flatMap(([prefix, property]) => [ [${prefix}-<number>, ${property}: calc(var(--spacing) * <number>);], [-${prefix}-<number>, ${property}: calc(var(--spacing) * -<number>);], [${prefix}-(<custom-property>), ${property}: var(<custom-property>);], [${prefix}-[<value>], ${property}: <value>;], ])} />

Examples

Basic example

Use the scroll-pt-<number>, scroll-pr-<number>, scroll-pb-<number>, and scroll-pl-<number> utilities like scroll-pl-4 and scroll-pt-6 to set the scroll offset of an element within a snap container:

    </div>
    <div className="shrink-0 snap-start first:pl-6 last:pr-[calc(100%-21.5rem)]">
      
    </div>
    <div className="shrink-0 snap-start first:pl-6 last:pr-[calc(100%-21.5rem)]">
      
    </div>
    <div className="shrink-0 snap-start first:pl-6 last:pr-[calc(100%-21.5rem)]">
      
    </div>
    <div className="shrink-0 snap-start first:pl-6 last:pr-[calc(100%-21.5rem)]">
      
    </div>
  </div>
</div>

} </Example>

html

<!-- [!code classes:scroll-pl-6] -->
<div class="snap-x scroll-pl-6 ...">
  <div class="snap-start ...">
    
  </div>
  <div class="snap-start ...">
    
  </div>
  <div class="snap-start ...">
    
  </div>
  <div class="snap-start ...">
    
  </div>
  <div class="snap-start ...">
    
  </div>
</div>

</Figure>

Using logical properties

Use the scroll-ps-<number> and scroll-pe-<number> utilities to set the scroll-padding-inline-start and scroll-padding-inline-end logical properties, which map to either the left or right side based on the text direction:

<Figure hint="Scroll in the grid of images to see the expected behavior"> <Example padding={false}> { <> <p className="mb-4 pt-8 pl-6 text-sm font-medium">Left-to-right</p> <div className="relative" dir="ltr"> <Stripes border className="absolute start-0 top-0 bottom-10 w-6" /> <div className="flex w-full snap-x scroll-ps-6 gap-8 overflow-x-auto pb-10"> <div className="shrink-0 snap-start first:ps-6 last:pe-[calc(100%-21.5rem)]">

      </div>
      <div className="shrink-0 snap-start first:ps-6 last:pe-[calc(100%-21.5rem)]">
        
      </div>
      <div className="shrink-0 snap-start first:ps-6 last:pe-[calc(100%-21.5rem)]">
        
      </div>
      <div className="shrink-0 snap-start first:ps-6 last:pe-[calc(100%-21.5rem)]">
        
      </div>
      <div className="shrink-0 snap-start first:ps-6 last:pe-[calc(100%-21.5rem)]">
        
      </div>
    </div>
  </div>
  <p className="mt-4 mb-4 pl-6 text-sm font-medium">Right-to-left</p>
  <div className="relative" dir="rtl">
    <Stripes border className="absolute start-0 top-0 bottom-10 w-6" />
    <div className="flex w-full snap-x scroll-ps-6 gap-8 overflow-x-auto pb-10">
      <div className="shrink-0 snap-start first:ps-6 last:pe-[calc(100%-21.5rem)]">
        
      </div>
      <div className="shrink-0 snap-start first:ps-6 last:pe-[calc(100%-21.5rem)]">
        
      </div>
      <div className="shrink-0 snap-start first:ps-6 last:pe-[calc(100%-21.5rem)]">
        
      </div>
      <div className="shrink-0 snap-start first:ps-6 last:pe-[calc(100%-21.5rem)]">
        
      </div>
      <div className="shrink-0 snap-start first:ps-6 last:pe-[calc(100%-21.5rem)]">
        
      </div>
    </div>
  </div>
</>

} </Example>

html

<!-- [!code word:dir="ltr"] -->
<!-- [!code word:dir="rtl"] -->
<!-- [!code classes:scroll-ps-6] -->
<div dir="ltr">
  <div class="snap-x scroll-ps-6 ...">
    <!-- ... -->
  </div>
</div>

<div dir="rtl">
  <div class="snap-x scroll-ps-6 ...">
    <!-- ... -->
  </div>
</div>

</Figure>

Use the scroll-pbs-<number> and scroll-pbe-<number> utilities to set the scroll-padding-block-start and scroll-padding-block-end logical properties, which map to either the top or bottom side based on the writing mode:

html

<!-- [!code classes:scroll-pbs-6] -->
<div class="snap-y scroll-pbs-6 ...">
  <!-- ... -->
</div>

Using negative values

To use a negative scroll padding value, prefix the class name with a dash to convert it to a negative value:

html

<!-- [!code classes:-scroll-ps-6] -->
<div class="-scroll-ps-6 snap-x ...">
  <!-- ... -->
</div>

Using a custom value

Responsive design

Customizing your theme