0build.dev
Choose a layout

scroll-margin

Report an Issue
Class Description

scroll-m

Sets scroll-margin via --scroll-m. Scaled by spacing unit. Useful for scroll-snap and anchor offsets.

CSS Rules 

.scroll-m {
  scroll-margin: calc(var(--spacing) * var(--scroll-m));
}

Usage

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

Responsive

Prefix .scroll-m 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-m" style="--md-scroll-m: /* 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-m:hover" style="--scroll-m-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-m: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-m::before" style="--scroll-m-before: /* value */;" />

<element class="content-after scroll-m::after" style="--scroll-m-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-m=value" />

<!-- Output -->
<element class="scroll-m" style="--scroll-m: 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-m Sets scroll-margin via --scroll-m. Scaled by spacing unit. Useful for scroll-snap and anchor offsets.

[scroll-m]

Applies raw --scroll-m directly to scroll-margin. Use scroll-m for spacing-scaled values.

CSS Rules 

.\[scroll-m\] {
  scroll-margin: var(--scroll-m);
}

Usage

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

Responsive

Prefix .[scroll-m] 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-m]" style="--md-scroll-m: /* 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-m]:hover" style="--scroll-m-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-m]: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-m]::before" style="--scroll-m-before: /* value */;" />

<element class="content-after [scroll-m]::after" style="--scroll-m-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-m]=value" />

<!-- Output -->
<element class="[scroll-m]" style="--scroll-m: 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-m] Applies raw --scroll-m directly to scroll-margin. Use scroll-m for spacing-scaled values.

scroll-mt

Sets scroll margin above a scroll target via --scroll-mt. Scaled by spacing unit. Use [scroll-mt] for raw values.

CSS Rules 

.scroll-mt {
  scroll-margin-top: calc(var(--spacing) * var(--scroll-mt));
}

Usage

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

Responsive

Prefix .scroll-mt 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-mt" style="--md-scroll-mt: /* 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-mt:hover" style="--scroll-mt-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-mt: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-mt::before" style="--scroll-mt-before: /* value */;" />

<element class="content-after scroll-mt::after" style="--scroll-mt-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-mt=value" />

<!-- Output -->
<element class="scroll-mt" style="--scroll-mt: 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-mt Sets scroll margin above a scroll target via --scroll-mt. Scaled by spacing unit. Use [scroll-mt] for raw values.

[scroll-mt]

Applies raw --scroll-mt directly to scroll-margin-top. Use scroll-mt for spacing-scaled values.

CSS Rules 

.\[scroll-mt\] {
  scroll-margin-top: var(--scroll-mt);
}

Usage

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

Responsive

Prefix .[scroll-mt] 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-mt]" style="--md-scroll-mt: /* 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-mt]:hover" style="--scroll-mt-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-mt]: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-mt]::before" style="--scroll-mt-before: /* value */;" />

<element class="content-after [scroll-mt]::after" style="--scroll-mt-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-mt]=value" />

<!-- Output -->
<element class="[scroll-mt]" style="--scroll-mt: 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-mt] Applies raw --scroll-mt directly to scroll-margin-top. Use scroll-mt for spacing-scaled values.

scroll-mb

Sets scroll margin below a scroll target via --scroll-mb. Scaled by spacing unit. Use [scroll-mb] for raw values.

CSS Rules 

.scroll-mb {
  scroll-margin-bottom: calc(var(--spacing) * var(--scroll-mb));
}

Usage

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

Responsive

Prefix .scroll-mb 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-mb" style="--md-scroll-mb: /* 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-mb:hover" style="--scroll-mb-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-mb: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-mb::before" style="--scroll-mb-before: /* value */;" />

<element class="content-after scroll-mb::after" style="--scroll-mb-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-mb=value" />

<!-- Output -->
<element class="scroll-mb" style="--scroll-mb: 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-mb Sets scroll margin below a scroll target via --scroll-mb. Scaled by spacing unit. Use [scroll-mb] for raw values.

[scroll-mb]

Applies raw --scroll-mb directly to scroll-margin-bottom. Use scroll-mb for spacing-scaled values.

CSS Rules 

.\[scroll-mb\] {
  scroll-margin-bottom: var(--scroll-mb);
}

Usage

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

Responsive

Prefix .[scroll-mb] 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-mb]" style="--md-scroll-mb: /* 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-mb]:hover" style="--scroll-mb-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-mb]: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-mb]::before" style="--scroll-mb-before: /* value */;" />

<element class="content-after [scroll-mb]::after" style="--scroll-mb-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-mb]=value" />

<!-- Output -->
<element class="[scroll-mb]" style="--scroll-mb: 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-mb] Applies raw --scroll-mb directly to scroll-margin-bottom. Use scroll-mb for spacing-scaled values.

scroll-ml

Sets scroll margin to the left of a scroll target via --scroll-ml. Scaled by spacing unit. Use [scroll-ml] for raw values.

CSS Rules 

.scroll-ml {
  scroll-margin-left: calc(var(--spacing) * var(--scroll-ml));
}

Usage

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

Responsive

Prefix .scroll-ml 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-ml" style="--md-scroll-ml: /* 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-ml:hover" style="--scroll-ml-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-ml: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-ml::before" style="--scroll-ml-before: /* value */;" />

<element class="content-after scroll-ml::after" style="--scroll-ml-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-ml=value" />

<!-- Output -->
<element class="scroll-ml" style="--scroll-ml: 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-ml Sets scroll margin to the left of a scroll target via --scroll-ml. Scaled by spacing unit. Use [scroll-ml] for raw values.

[scroll-ml]

Applies raw --scroll-ml directly to scroll-margin-left. Use scroll-ml for spacing-scaled values.

CSS Rules 

.\[scroll-ml\] {
  scroll-margin-left: var(--scroll-ml);
}

Usage

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

Responsive

Prefix .[scroll-ml] 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-ml]" style="--md-scroll-ml: /* 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-ml]:hover" style="--scroll-ml-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-ml]: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-ml]::before" style="--scroll-ml-before: /* value */;" />

<element class="content-after [scroll-ml]::after" style="--scroll-ml-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-ml]=value" />

<!-- Output -->
<element class="[scroll-ml]" style="--scroll-ml: 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-ml] Applies raw --scroll-ml directly to scroll-margin-left. Use scroll-ml for spacing-scaled values.

scroll-mr

Sets scroll margin to the right of a scroll target via --scroll-mr. Scaled by spacing unit. Use [scroll-mr] for raw values.

CSS Rules 

.scroll-mr {
  scroll-margin-right: calc(var(--spacing) * var(--scroll-mr));
}

Usage

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

Responsive

Prefix .scroll-mr 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-mr" style="--md-scroll-mr: /* 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-mr:hover" style="--scroll-mr-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-mr: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-mr::before" style="--scroll-mr-before: /* value */;" />

<element class="content-after scroll-mr::after" style="--scroll-mr-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-mr=value" />

<!-- Output -->
<element class="scroll-mr" style="--scroll-mr: 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-mr Sets scroll margin to the right of a scroll target via --scroll-mr. Scaled by spacing unit. Use [scroll-mr] for raw values.

[scroll-mr]

Applies raw --scroll-mr directly to scroll-margin-right. Use scroll-mr for spacing-scaled values.

CSS Rules 

.\[scroll-mr\] {
  scroll-margin-right: var(--scroll-mr);
}

Usage

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

Responsive

Prefix .[scroll-mr] 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-mr]" style="--md-scroll-mr: /* 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-mr]:hover" style="--scroll-mr-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-mr]: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-mr]::before" style="--scroll-mr-before: /* value */;" />

<element class="content-after [scroll-mr]::after" style="--scroll-mr-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-mr]=value" />

<!-- Output -->
<element class="[scroll-mr]" style="--scroll-mr: 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-mr] Applies raw --scroll-mr directly to scroll-margin-right. Use scroll-mr for spacing-scaled values.

scroll-ms

Sets inline-start scroll margin via --scroll-ms. Scaled by spacing unit. Use [scroll-ms] for raw values.

CSS Rules 

.scroll-ms {
  scroll-margin-inline-start: calc(var(--spacing) * var(--scroll-ms));
}

Usage

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

Responsive

Prefix .scroll-ms 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-ms" style="--md-scroll-ms: /* 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-ms:hover" style="--scroll-ms-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-ms: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-ms::before" style="--scroll-ms-before: /* value */;" />

<element class="content-after scroll-ms::after" style="--scroll-ms-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-ms=value" />

<!-- Output -->
<element class="scroll-ms" style="--scroll-ms: 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-ms Sets inline-start scroll margin via --scroll-ms. Scaled by spacing unit. Use [scroll-ms] for raw values.

[scroll-ms]

Applies raw --scroll-ms directly to scroll-margin-inline-start. Use scroll-ms for spacing-scaled values.

CSS Rules 

.\[scroll-ms\] {
  scroll-margin-inline-start: var(--scroll-ms);
}

Usage

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

Responsive

Prefix .[scroll-ms] 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-ms]" style="--md-scroll-ms: /* 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-ms]:hover" style="--scroll-ms-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-ms]: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-ms]::before" style="--scroll-ms-before: /* value */;" />

<element class="content-after [scroll-ms]::after" style="--scroll-ms-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-ms]=value" />

<!-- Output -->
<element class="[scroll-ms]" style="--scroll-ms: 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-ms] Applies raw --scroll-ms directly to scroll-margin-inline-start. Use scroll-ms for spacing-scaled values.

scroll-me

Sets inline-end scroll margin via --scroll-me. Scaled by spacing unit. Use [scroll-me] for raw values.

CSS Rules 

.scroll-me {
  scroll-margin-inline-end: calc(var(--spacing) * var(--scroll-me));
}

Usage

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

Responsive

Prefix .scroll-me 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-me" style="--md-scroll-me: /* 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-me:hover" style="--scroll-me-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-me: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-me::before" style="--scroll-me-before: /* value */;" />

<element class="content-after scroll-me::after" style="--scroll-me-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-me=value" />

<!-- Output -->
<element class="scroll-me" style="--scroll-me: 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-me Sets inline-end scroll margin via --scroll-me. Scaled by spacing unit. Use [scroll-me] for raw values.

[scroll-me]

Applies raw --scroll-me directly to scroll-margin-inline-end. Use scroll-me for spacing-scaled values.

CSS Rules 

.\[scroll-me\] {
  scroll-margin-inline-end: var(--scroll-me);
}

Usage

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

Responsive

Prefix .[scroll-me] 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-me]" style="--md-scroll-me: /* 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-me]:hover" style="--scroll-me-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-me]: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-me]::before" style="--scroll-me-before: /* value */;" />

<element class="content-after [scroll-me]::after" style="--scroll-me-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-me]=value" />

<!-- Output -->
<element class="[scroll-me]" style="--scroll-me: 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-me] Applies raw --scroll-me directly to scroll-margin-inline-end. Use scroll-me for spacing-scaled values.

scroll-mx

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

CSS Rules 

.scroll-mx {
  scroll-margin-inline: calc(var(--spacing) * var(--scroll-mx));
}

Usage

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

Responsive

Prefix .scroll-mx 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-mx" style="--md-scroll-mx: /* 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-mx:hover" style="--scroll-mx-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-mx: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-mx::before" style="--scroll-mx-before: /* value */;" />

<element class="content-after scroll-mx::after" style="--scroll-mx-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-mx=value" />

<!-- Output -->
<element class="scroll-mx" style="--scroll-mx: 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-mx Sets inline-axis scroll margin via --scroll-mx. Scaled by spacing unit. Use [scroll-mx] for raw values.

[scroll-mx]

Applies raw --scroll-mx directly to scroll-margin-inline. Use scroll-mx for spacing-scaled values.

CSS Rules 

.\[scroll-mx\] {
  scroll-margin-inline: var(--scroll-mx);
}

Usage

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

Responsive

Prefix .[scroll-mx] 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-mx]" style="--md-scroll-mx: /* 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-mx]:hover" style="--scroll-mx-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-mx]: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-mx]::before" style="--scroll-mx-before: /* value */;" />

<element class="content-after [scroll-mx]::after" style="--scroll-mx-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-mx]=value" />

<!-- Output -->
<element class="[scroll-mx]" style="--scroll-mx: 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-mx] Applies raw --scroll-mx directly to scroll-margin-inline. Use scroll-mx for spacing-scaled values.

scroll-my

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

CSS Rules 

.scroll-my {
  scroll-margin-block: calc(var(--spacing) * var(--scroll-my));
}

Usage

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

Responsive

Prefix .scroll-my 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-my" style="--md-scroll-my: /* 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-my:hover" style="--scroll-my-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-my: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-my::before" style="--scroll-my-before: /* value */;" />

<element class="content-after scroll-my::after" style="--scroll-my-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-my=value" />

<!-- Output -->
<element class="scroll-my" style="--scroll-my: 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-my Sets block-axis scroll margin via --scroll-my. Scaled by spacing unit. Use [scroll-my] for raw values.

[scroll-my]

Applies raw --scroll-my directly to scroll-margin-block. Use scroll-my for spacing-scaled values.

CSS Rules 

.\[scroll-my\] {
  scroll-margin-block: var(--scroll-my);
}

Usage

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

Responsive

Prefix .[scroll-my] 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-my]" style="--md-scroll-my: /* 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-my]:hover" style="--scroll-my-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-my]: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-my]::before" style="--scroll-my-before: /* value */;" />

<element class="content-after [scroll-my]::after" style="--scroll-my-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-my]=value" />

<!-- Output -->
<element class="[scroll-my]" style="--scroll-my: 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-my] Applies raw --scroll-my directly to scroll-margin-block. Use scroll-my for spacing-scaled values.