0build.dev
Choose a layout

scroll-padding

Report an Issue
Class Description

scroll-p

Sets scroll padding inside the scroll container on all sides via --scroll-p. Scaled by spacing unit. Use [scroll-p] for raw values.

CSS Rules 

.scroll-p {
  scroll-padding: calc(var(--spacing) * var(--scroll-p));
}

Usage

The .scroll-p class is flagged as a value-driven selector. The variable --scroll-p is required. 
<element class="scroll-p" style="--scroll-p: /* value */;" />

Responsive

Prefix .scroll-p utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:scroll-p" style="--md-scroll-p: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="scroll-p:hover" style="--scroll-p-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="scroll-p:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before scroll-p::before" style="--scroll-p-before: /* value */;" />

<element class="content-after scroll-p::after" style="--scroll-p-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="scroll-p=value" />

<!-- Output -->
<element class="scroll-p" style="--scroll-p: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.scroll-p Sets scroll padding inside the scroll container on all sides via --scroll-p. Scaled by spacing unit. Use [scroll-p] for raw values.

[scroll-p]

Applies raw --scroll-p directly to scroll-padding. Use scroll-p for spacing-scaled values.

CSS Rules 

.\[scroll-p\] {
  scroll-padding: var(--scroll-p);
}

Usage

The .[scroll-p] class is flagged as a value-driven selector. The variable --scroll-p is required. 
<element class="[scroll-p]" style="--scroll-p: /* value */;" />

Responsive

Prefix .[scroll-p] utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:[scroll-p]" style="--md-scroll-p: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="[scroll-p]:hover" style="--scroll-p-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="[scroll-p]:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before [scroll-p]::before" style="--scroll-p-before: /* value */;" />

<element class="content-after [scroll-p]::after" style="--scroll-p-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="[scroll-p]=value" />

<!-- Output -->
<element class="[scroll-p]" style="--scroll-p: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.[scroll-p] Applies raw --scroll-p directly to scroll-padding. Use scroll-p for spacing-scaled values.

scroll-pt

Adds scroll padding above the scroll container viewport via --scroll-pt. Scaled by spacing unit. Use [scroll-pt] for raw values.

CSS Rules 

.scroll-pt {
  scroll-padding-top: calc(var(--spacing) * var(--scroll-pt));
}

Usage

The .scroll-pt class is flagged as a value-driven selector. The variable --scroll-pt is required. 
<element class="scroll-pt" style="--scroll-pt: /* value */;" />

Responsive

Prefix .scroll-pt utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:scroll-pt" style="--md-scroll-pt: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="scroll-pt:hover" style="--scroll-pt-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="scroll-pt:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before scroll-pt::before" style="--scroll-pt-before: /* value */;" />

<element class="content-after scroll-pt::after" style="--scroll-pt-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="scroll-pt=value" />

<!-- Output -->
<element class="scroll-pt" style="--scroll-pt: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.scroll-pt Adds scroll padding above the scroll container viewport via --scroll-pt. Scaled by spacing unit. Use [scroll-pt] for raw values.

scroll-pb

Adds scroll padding below the scroll container viewport via --scroll-pb. Scaled by spacing unit. Use [scroll-pb] for raw values.

CSS Rules 

.scroll-pb {
  scroll-padding-bottom: calc(var(--spacing) * var(--scroll-pb));
}

Usage

The .scroll-pb class is flagged as a value-driven selector. The variable --scroll-pb is required. 
<element class="scroll-pb" style="--scroll-pb: /* value */;" />

Responsive

Prefix .scroll-pb utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:scroll-pb" style="--md-scroll-pb: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="scroll-pb:hover" style="--scroll-pb-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="scroll-pb:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before scroll-pb::before" style="--scroll-pb-before: /* value */;" />

<element class="content-after scroll-pb::after" style="--scroll-pb-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="scroll-pb=value" />

<!-- Output -->
<element class="scroll-pb" style="--scroll-pb: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.scroll-pb Adds scroll padding below the scroll container viewport via --scroll-pb. Scaled by spacing unit. Use [scroll-pb] for raw values.

scroll-pl

Adds scroll padding to the left of the scroll container viewport via --scroll-pl. Scaled by spacing unit. Use [scroll-pl] for raw values.

CSS Rules 

.scroll-pl {
  scroll-padding-left: calc(var(--spacing) * var(--scroll-pl));
}

Usage

The .scroll-pl class is flagged as a value-driven selector. The variable --scroll-pl is required. 
<element class="scroll-pl" style="--scroll-pl: /* value */;" />

Responsive

Prefix .scroll-pl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:scroll-pl" style="--md-scroll-pl: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="scroll-pl:hover" style="--scroll-pl-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="scroll-pl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before scroll-pl::before" style="--scroll-pl-before: /* value */;" />

<element class="content-after scroll-pl::after" style="--scroll-pl-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="scroll-pl=value" />

<!-- Output -->
<element class="scroll-pl" style="--scroll-pl: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.scroll-pl Adds scroll padding to the left of the scroll container viewport via --scroll-pl. Scaled by spacing unit. Use [scroll-pl] for raw values.

scroll-pr

Adds scroll padding to the right of the scroll container viewport via --scroll-pr. Scaled by spacing unit. Use [scroll-pr] for raw values.

CSS Rules 

.scroll-pr {
  scroll-padding-right: calc(var(--spacing) * var(--scroll-pr));
}

Usage

The .scroll-pr class is flagged as a value-driven selector. The variable --scroll-pr is required. 
<element class="scroll-pr" style="--scroll-pr: /* value */;" />

Responsive

Prefix .scroll-pr utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:scroll-pr" style="--md-scroll-pr: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="scroll-pr:hover" style="--scroll-pr-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="scroll-pr:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before scroll-pr::before" style="--scroll-pr-before: /* value */;" />

<element class="content-after scroll-pr::after" style="--scroll-pr-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="scroll-pr=value" />

<!-- Output -->
<element class="scroll-pr" style="--scroll-pr: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.scroll-pr Adds scroll padding to the right of the scroll container viewport via --scroll-pr. Scaled by spacing unit. Use [scroll-pr] for raw values.

scroll-ps

Adds inline-start scroll padding via --scroll-ps. Scaled by spacing unit. Use [scroll-ps] for raw values.

CSS Rules 

.scroll-ps {
  scroll-padding-inline-start: calc(var(--spacing) * var(--scroll-ps));
}

Usage

The .scroll-ps class is flagged as a value-driven selector. The variable --scroll-ps is required. 
<element class="scroll-ps" style="--scroll-ps: /* value */;" />

Responsive

Prefix .scroll-ps utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:scroll-ps" style="--md-scroll-ps: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="scroll-ps:hover" style="--scroll-ps-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="scroll-ps:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before scroll-ps::before" style="--scroll-ps-before: /* value */;" />

<element class="content-after scroll-ps::after" style="--scroll-ps-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="scroll-ps=value" />

<!-- Output -->
<element class="scroll-ps" style="--scroll-ps: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.scroll-ps Adds inline-start scroll padding via --scroll-ps. Scaled by spacing unit. Use [scroll-ps] for raw values.

scroll-pe

Adds inline-end scroll padding via --scroll-pe. Scaled by spacing unit. Use [scroll-pe] for raw values.

CSS Rules 

.scroll-pe {
  scroll-padding-inline-end: calc(var(--spacing) * var(--scroll-pe));
}

Usage

The .scroll-pe class is flagged as a value-driven selector. The variable --scroll-pe is required. 
<element class="scroll-pe" style="--scroll-pe: /* value */;" />

Responsive

Prefix .scroll-pe utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:scroll-pe" style="--md-scroll-pe: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="scroll-pe:hover" style="--scroll-pe-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="scroll-pe:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before scroll-pe::before" style="--scroll-pe-before: /* value */;" />

<element class="content-after scroll-pe::after" style="--scroll-pe-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="scroll-pe=value" />

<!-- Output -->
<element class="scroll-pe" style="--scroll-pe: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.scroll-pe Adds inline-end scroll padding via --scroll-pe. Scaled by spacing unit. Use [scroll-pe] for raw values.

[scroll-pt]

Applies raw --scroll-pt directly to scroll-padding-top. Use scroll-pt for spacing-scaled values.

CSS Rules 

.\[scroll-pt\] {
  scroll-padding-top: var(--scroll-pt);
}

Usage

The .[scroll-pt] class is flagged as a value-driven selector. The variable --scroll-pt is required. 
<element class="[scroll-pt]" style="--scroll-pt: /* value */;" />

Responsive

Prefix .[scroll-pt] utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:[scroll-pt]" style="--md-scroll-pt: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="[scroll-pt]:hover" style="--scroll-pt-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="[scroll-pt]:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before [scroll-pt]::before" style="--scroll-pt-before: /* value */;" />

<element class="content-after [scroll-pt]::after" style="--scroll-pt-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="[scroll-pt]=value" />

<!-- Output -->
<element class="[scroll-pt]" style="--scroll-pt: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.[scroll-pt] Applies raw --scroll-pt directly to scroll-padding-top. Use scroll-pt for spacing-scaled values.

[scroll-pb]

Applies raw --scroll-pb directly to scroll-padding-bottom. Use scroll-pb for spacing-scaled values.

CSS Rules 

.\[scroll-pb\] {
  scroll-padding-bottom: var(--scroll-pb);
}

Usage

The .[scroll-pb] class is flagged as a value-driven selector. The variable --scroll-pb is required. 
<element class="[scroll-pb]" style="--scroll-pb: /* value */;" />

Responsive

Prefix .[scroll-pb] utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:[scroll-pb]" style="--md-scroll-pb: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="[scroll-pb]:hover" style="--scroll-pb-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="[scroll-pb]:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before [scroll-pb]::before" style="--scroll-pb-before: /* value */;" />

<element class="content-after [scroll-pb]::after" style="--scroll-pb-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="[scroll-pb]=value" />

<!-- Output -->
<element class="[scroll-pb]" style="--scroll-pb: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.[scroll-pb] Applies raw --scroll-pb directly to scroll-padding-bottom. Use scroll-pb for spacing-scaled values.

[scroll-pl]

Applies raw --scroll-pl directly to scroll-padding-left. Use scroll-pl for spacing-scaled values.

CSS Rules 

.\[scroll-pl\] {
  scroll-padding-left: var(--scroll-pl);
}

Usage

The .[scroll-pl] class is flagged as a value-driven selector. The variable --scroll-pl is required. 
<element class="[scroll-pl]" style="--scroll-pl: /* value */;" />

Responsive

Prefix .[scroll-pl] utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:[scroll-pl]" style="--md-scroll-pl: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="[scroll-pl]:hover" style="--scroll-pl-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="[scroll-pl]:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before [scroll-pl]::before" style="--scroll-pl-before: /* value */;" />

<element class="content-after [scroll-pl]::after" style="--scroll-pl-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="[scroll-pl]=value" />

<!-- Output -->
<element class="[scroll-pl]" style="--scroll-pl: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.[scroll-pl] Applies raw --scroll-pl directly to scroll-padding-left. Use scroll-pl for spacing-scaled values.

[scroll-pr]

Applies raw --scroll-pr directly to scroll-padding-right. Use scroll-pr for spacing-scaled values.

CSS Rules 

.\[scroll-pr\] {
  scroll-padding-right: var(--scroll-pr);
}

Usage

The .[scroll-pr] class is flagged as a value-driven selector. The variable --scroll-pr is required. 
<element class="[scroll-pr]" style="--scroll-pr: /* value */;" />

Responsive

Prefix .[scroll-pr] utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:[scroll-pr]" style="--md-scroll-pr: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="[scroll-pr]:hover" style="--scroll-pr-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="[scroll-pr]:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before [scroll-pr]::before" style="--scroll-pr-before: /* value */;" />

<element class="content-after [scroll-pr]::after" style="--scroll-pr-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="[scroll-pr]=value" />

<!-- Output -->
<element class="[scroll-pr]" style="--scroll-pr: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.[scroll-pr] Applies raw --scroll-pr directly to scroll-padding-right. Use scroll-pr for spacing-scaled values.

[scroll-ps]

Applies raw --scroll-ps directly to scroll-padding-inline-start. Use scroll-ps for spacing-scaled values.

CSS Rules 

.\[scroll-ps\] {
  scroll-padding-inline-start: var(--scroll-ps);
}

Usage

The .[scroll-ps] class is flagged as a value-driven selector. The variable --scroll-ps is required. 
<element class="[scroll-ps]" style="--scroll-ps: /* value */;" />

Responsive

Prefix .[scroll-ps] utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:[scroll-ps]" style="--md-scroll-ps: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="[scroll-ps]:hover" style="--scroll-ps-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="[scroll-ps]:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before [scroll-ps]::before" style="--scroll-ps-before: /* value */;" />

<element class="content-after [scroll-ps]::after" style="--scroll-ps-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="[scroll-ps]=value" />

<!-- Output -->
<element class="[scroll-ps]" style="--scroll-ps: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.[scroll-ps] Applies raw --scroll-ps directly to scroll-padding-inline-start. Use scroll-ps for spacing-scaled values.

[scroll-pe]

Applies raw --scroll-pe directly to scroll-padding-inline-end. Use scroll-pe for spacing-scaled values.

CSS Rules 

.\[scroll-pe\] {
  scroll-padding-inline-end: var(--scroll-pe);
}

Usage

The .[scroll-pe] class is flagged as a value-driven selector. The variable --scroll-pe is required. 
<element class="[scroll-pe]" style="--scroll-pe: /* value */;" />

Responsive

Prefix .[scroll-pe] utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:[scroll-pe]" style="--md-scroll-pe: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="[scroll-pe]:hover" style="--scroll-pe-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="[scroll-pe]:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before [scroll-pe]::before" style="--scroll-pe-before: /* value */;" />

<element class="content-after [scroll-pe]::after" style="--scroll-pe-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="[scroll-pe]=value" />

<!-- Output -->
<element class="[scroll-pe]" style="--scroll-pe: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.[scroll-pe] Applies raw --scroll-pe directly to scroll-padding-inline-end. Use scroll-pe for spacing-scaled values.

scroll-px

Sets inline-axis scroll padding via --scroll-px. Scaled by spacing unit. Use [scroll-px] for raw values.

CSS Rules 

.scroll-px {
  scroll-padding-inline: calc(var(--spacing) * var(--scroll-px));
}

Usage

The .scroll-px class is flagged as a value-driven selector. The variable --scroll-px is required. 
<element class="scroll-px" style="--scroll-px: /* value */;" />

Responsive

Prefix .scroll-px utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:scroll-px" style="--md-scroll-px: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="scroll-px:hover" style="--scroll-px-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="scroll-px:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before scroll-px::before" style="--scroll-px-before: /* value */;" />

<element class="content-after scroll-px::after" style="--scroll-px-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="scroll-px=value" />

<!-- Output -->
<element class="scroll-px" style="--scroll-px: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.scroll-px Sets inline-axis scroll padding via --scroll-px. Scaled by spacing unit. Use [scroll-px] for raw values.

scroll-py

Sets block-axis scroll padding via --scroll-py. Scaled by spacing unit. Use [scroll-py] for raw values.

CSS Rules 

.scroll-py {
  scroll-padding-block: calc(var(--spacing) * var(--scroll-py));
}

Usage

The .scroll-py class is flagged as a value-driven selector. The variable --scroll-py is required. 
<element class="scroll-py" style="--scroll-py: /* value */;" />

Responsive

Prefix .scroll-py utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:scroll-py" style="--md-scroll-py: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="scroll-py:hover" style="--scroll-py-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="scroll-py:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before scroll-py::before" style="--scroll-py-before: /* value */;" />

<element class="content-after scroll-py::after" style="--scroll-py-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="scroll-py=value" />

<!-- Output -->
<element class="scroll-py" style="--scroll-py: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.scroll-py Sets block-axis scroll padding via --scroll-py. Scaled by spacing unit. Use [scroll-py] for raw values.

[scroll-px]

Applies raw --scroll-px directly to scroll-padding-inline. Use scroll-px for spacing-scaled values.

CSS Rules 

.\[scroll-px\] {
  scroll-padding-inline: var(--scroll-px);
}

Usage

The .[scroll-px] class is flagged as a value-driven selector. The variable --scroll-px is required. 
<element class="[scroll-px]" style="--scroll-px: /* value */;" />

Responsive

Prefix .[scroll-px] utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:[scroll-px]" style="--md-scroll-px: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="[scroll-px]:hover" style="--scroll-px-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="[scroll-px]:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before [scroll-px]::before" style="--scroll-px-before: /* value */;" />

<element class="content-after [scroll-px]::after" style="--scroll-px-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="[scroll-px]=value" />

<!-- Output -->
<element class="[scroll-px]" style="--scroll-px: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.[scroll-px] Applies raw --scroll-px directly to scroll-padding-inline. Use scroll-px for spacing-scaled values.

[scroll-py]

Applies raw --scroll-py directly to scroll-padding-block. Use scroll-py for spacing-scaled values.

CSS Rules 

.\[scroll-py\] {
  scroll-padding-block: var(--scroll-py);
}

Usage

The .[scroll-py] class is flagged as a value-driven selector. The variable --scroll-py is required. 
<element class="[scroll-py]" style="--scroll-py: /* value */;" />

Responsive

Prefix .[scroll-py] utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:[scroll-py]" style="--md-scroll-py: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="[scroll-py]:hover" style="--scroll-py-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="[scroll-py]:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before [scroll-py]::before" style="--scroll-py-before: /* value */;" />

<element class="content-after [scroll-py]::after" style="--scroll-py-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="[scroll-py]=value" />

<!-- Output -->
<element class="[scroll-py]" style="--scroll-py: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.[scroll-py] Applies raw --scroll-py directly to scroll-padding-block. Use scroll-py for spacing-scaled values.