0build.dev
Choose a layout

margin

Report an Issue
Class Description

m

Sets margin on all sides via --m. Scaled by spacing unit. Use [m] for raw values.

CSS Rules 

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

Usage

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

Responsive

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

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

<!-- Output -->
<element class="m" style="--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.

.m Sets margin on all sides via --m. Scaled by spacing unit. Use [m] for raw values.

[m]

Sets margin on all sides directly via --m. Raw, unscaled outer spacing. Use m for spacing-scaled margin.

CSS Rules 

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

Usage

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

Responsive

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

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

<!-- Output -->
<element class="[m]" style="--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.

.[m] Sets margin on all sides directly via --m. Raw, unscaled outer spacing. Use m for spacing-scaled margin.

mt

Sets margin-top via --mt. Scaled.

CSS Rules 

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

Usage

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

Responsive

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

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

<!-- Output -->
<element class="mt" style="--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.

.mt Sets margin-top via --mt. Scaled.

[mt]

Sets top margin directly via --mt. Raw outer spacing above the element.

CSS Rules 

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

Usage

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

Responsive

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

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

<!-- Output -->
<element class="[mt]" style="--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.

.[mt] Sets top margin directly via --mt. Raw outer spacing above the element.

mb

Sets margin-bottom via --mb. Scaled.

CSS Rules 

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

Usage

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

Responsive

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

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

<!-- Output -->
<element class="mb" style="--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.

.mb Sets margin-bottom via --mb. Scaled.

[mb]

Sets bottom margin directly via --mb. Raw outer spacing below the element.

CSS Rules 

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

Usage

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

Responsive

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

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

<!-- Output -->
<element class="[mb]" style="--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.

.[mb] Sets bottom margin directly via --mb. Raw outer spacing below the element.

ml

Sets margin-left via --ml. Scaled.

CSS Rules 

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

Usage

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

Responsive

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

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

<!-- Output -->
<element class="ml" style="--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.

.ml Sets margin-left via --ml. Scaled.

[ml]

Sets left margin directly via --ml. Raw outer spacing to the left of the element.

CSS Rules 

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

Usage

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

Responsive

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

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

<!-- Output -->
<element class="[ml]" style="--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.

.[ml] Sets left margin directly via --ml. Raw outer spacing to the left of the element.

mr

Sets margin-right via --mr. Scaled.

CSS Rules 

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

Usage

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

Responsive

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

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

<!-- Output -->
<element class="mr" style="--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.

.mr Sets margin-right via --mr. Scaled.

[mr]

Sets right margin directly via --mr. Raw outer spacing to the right of the element.

CSS Rules 

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

Usage

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

Responsive

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

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

<!-- Output -->
<element class="[mr]" style="--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.

.[mr] Sets right margin directly via --mr. Raw outer spacing to the right of the element.

ms

Sets margin-inline-start (logical) via --ms. Scaled.

CSS Rules 

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

Usage

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

Responsive

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

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

<!-- Output -->
<element class="ms" style="--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.

.ms Sets margin-inline-start (logical) via --ms. Scaled.

[ms]

Sets inline-start margin directly via --ms. Raw logical outer spacing at the start edge.

CSS Rules 

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

Usage

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

Responsive

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

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

<!-- Output -->
<element class="[ms]" style="--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.

.[ms] Sets inline-start margin directly via --ms. Raw logical outer spacing at the start edge.

me

Sets margin-inline-end (logical) via --me. Scaled.

CSS Rules 

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

Usage

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

Responsive

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

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

<!-- Output -->
<element class="me" style="--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.

.me Sets margin-inline-end (logical) via --me. Scaled.

[me]

Sets inline-end margin directly via --me. Raw logical outer spacing at the end edge.

CSS Rules 

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

Usage

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

Responsive

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

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

<!-- Output -->
<element class="[me]" style="--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.

.[me] Sets inline-end margin directly via --me. Raw logical outer spacing at the end edge.

mx

Sets horizontal margin (left & right) via --mx. Scaled.

CSS Rules 

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

Usage

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

Responsive

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

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

<!-- Output -->
<element class="mx" style="--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.

.mx Sets horizontal margin (left & right) via --mx. Scaled.

[mx]

Sets inline-axis margins directly via --mx. Raw outer spacing on the start/end edges.

CSS Rules 

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

Usage

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

Responsive

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

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

<!-- Output -->
<element class="[mx]" style="--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.

.[mx] Sets inline-axis margins directly via --mx. Raw outer spacing on the start/end edges.

my

Sets vertical margin (top & bottom) via --my. Scaled.

CSS Rules 

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

Usage

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

Responsive

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

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

<!-- Output -->
<element class="my" style="--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.

.my Sets vertical margin (top & bottom) via --my. Scaled.

[my]

Sets block-axis margin directly via --my. Raw vertical outer spacing in normal writing modes.

CSS Rules 

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

Usage

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

Responsive

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

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

<!-- Output -->
<element class="[my]" style="--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.

.[my] Sets block-axis margin directly via --my. Raw vertical outer spacing in normal writing modes.

m-auto

Sets margin: auto on all sides.

CSS Rules 

.m-auto {
  margin: auto;
}

Usage 

<element class="m-auto" />

Responsive

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

<element class="md:m-auto" />

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="m-auto:hover" />

Group Hover Example

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

<element class="group">
  <element class="m-auto: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 m-auto::before" />

<element class="content-after m-auto::after" />
 .m-auto Sets margin: auto on all sides.

mt-auto

Sets margin-top to auto, useful for pushing elements apart in flex/grid layouts.

CSS Rules 

.mt-auto {
  margin-top: auto;
}

Usage 

<element class="mt-auto" />

Responsive

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

<element class="md:mt-auto" />

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="mt-auto:hover" />

Group Hover Example

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

<element class="group">
  <element class="mt-auto: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 mt-auto::before" />

<element class="content-after mt-auto::after" />
 .mt-auto Sets margin-top to auto, useful for pushing elements apart in flex/grid layouts.

mb-auto

Sets margin-bottom to auto, useful for pushing elements apart in flex/grid layouts.

CSS Rules 

.mb-auto {
  margin-bottom: auto;
}

Usage 

<element class="mb-auto" />

Responsive

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

<element class="md:mb-auto" />

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="mb-auto:hover" />

Group Hover Example

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

<element class="group">
  <element class="mb-auto: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 mb-auto::before" />

<element class="content-after mb-auto::after" />
 .mb-auto Sets margin-bottom to auto, useful for pushing elements apart in flex/grid layouts.

ml-auto

Sets margin-left to auto, commonly used to push an element to the right.

CSS Rules 

.ml-auto {
  margin-left: auto;
}

Usage 

<element class="ml-auto" />

Responsive

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

<element class="md:ml-auto" />

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="ml-auto:hover" />

Group Hover Example

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

<element class="group">
  <element class="ml-auto: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 ml-auto::before" />

<element class="content-after ml-auto::after" />
 .ml-auto Sets margin-left to auto, commonly used to push an element to the right.

mr-auto

Sets margin-right to auto, commonly used to push an element to the left.

CSS Rules 

.mr-auto {
  margin-right: auto;
}

Usage 

<element class="mr-auto" />

Responsive

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

<element class="md:mr-auto" />

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="mr-auto:hover" />

Group Hover Example

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

<element class="group">
  <element class="mr-auto: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 mr-auto::before" />

<element class="content-after mr-auto::after" />
 .mr-auto Sets margin-right to auto, commonly used to push an element to the left.

ms-auto

Sets logical margin-inline-start to auto, respecting writing direction.

CSS Rules 

.ms-auto {
  margin-inline-start: auto;
}

Usage 

<element class="ms-auto" />

Responsive

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

<element class="md:ms-auto" />

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="ms-auto:hover" />

Group Hover Example

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

<element class="group">
  <element class="ms-auto: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 ms-auto::before" />

<element class="content-after ms-auto::after" />
 .ms-auto Sets logical margin-inline-start to auto, respecting writing direction.

me-auto

Sets logical margin-inline-end to auto, respecting writing direction.

CSS Rules 

.me-auto {
  margin-inline-end: auto;
}

Usage 

<element class="me-auto" />

Responsive

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

<element class="md:me-auto" />

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="me-auto:hover" />

Group Hover Example

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

<element class="group">
  <element class="me-auto: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 me-auto::before" />

<element class="content-after me-auto::after" />
 .me-auto Sets logical margin-inline-end to auto, respecting writing direction.

mx-auto

Centers element horizontally via margin-inline: auto.

CSS Rules 

.mx-auto {
  margin-inline: auto;
}

Usage 

<element class="mx-auto" />

Responsive

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

<element class="md:mx-auto" />

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="mx-auto:hover" />

Group Hover Example

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

<element class="group">
  <element class="mx-auto: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 mx-auto::before" />

<element class="content-after mx-auto::after" />
 .mx-auto Centers element horizontally via margin-inline: auto.

my-auto

Sets margin-block (top and bottom) to auto.

CSS Rules 

.my-auto {
  margin-block: auto;
}

Usage 

<element class="my-auto" />

Responsive

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

<element class="md:my-auto" />

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="my-auto:hover" />

Group Hover Example

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

<element class="group">
  <element class="my-auto: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 my-auto::before" />

<element class="content-after my-auto::after" />
 .my-auto Sets margin-block (top and bottom) to auto.