0build.dev
Choose a layout

top / right / bottom / left

Report an Issue
Class Description

top

Sets top offset via --top. Scaled by spacing unit. Use [top] for raw values.

CSS Rules 

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

Usage

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

Responsive

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

<element class="md:top" style="--md-top: /* 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="top:hover" style="--top-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="top: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 top::before" style="--top-before: /* value */;" />

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

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

CLS Alert

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

.top Sets top offset via --top. Scaled by spacing unit. Use [top] for raw values.

[top]

Offsets an element from the top edge using raw --top. Best for absolute/fixed positioning.

CSS Rules 

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

Usage

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

Responsive

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

<element class="md:[top]" style="--md-top: /* 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="[top]:hover" style="--top-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="[top]: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 [top]::before" style="--top-before: /* value */;" />

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

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

CLS Alert

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

.[top] Offsets an element from the top edge using raw --top. Best for absolute/fixed positioning.

right

Sets right offset via --right. Scaled by spacing unit. Use [right] for raw values.

CSS Rules 

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

Usage

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

Responsive

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

<element class="md:right" style="--md-right: /* 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="right:hover" style="--right-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="right: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 right::before" style="--right-before: /* value */;" />

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

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

CLS Alert

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

.right Sets right offset via --right. Scaled by spacing unit. Use [right] for raw values.

[right]

Offsets an element from the right edge using raw --right. Best for absolute/fixed positioning.

CSS Rules 

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

Usage

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

Responsive

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

<element class="md:[right]" style="--md-right: /* 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="[right]:hover" style="--right-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="[right]: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 [right]::before" style="--right-before: /* value */;" />

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

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

CLS Alert

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

.[right] Offsets an element from the right edge using raw --right. Best for absolute/fixed positioning.

bottom

Sets bottom offset via --bottom. Scaled by spacing unit. Use [bottom] for raw values.

CSS Rules 

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

Usage

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

Responsive

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

<element class="md:bottom" style="--md-bottom: /* 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="bottom:hover" style="--bottom-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="bottom: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 bottom::before" style="--bottom-before: /* value */;" />

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

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

CLS Alert

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

.bottom Sets bottom offset via --bottom. Scaled by spacing unit. Use [bottom] for raw values.

[bottom]

Offsets an element from the bottom edge using raw --bottom. Best for absolute/fixed positioning.

CSS Rules 

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

Usage

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

Responsive

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

<element class="md:[bottom]" style="--md-bottom: /* 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="[bottom]:hover" style="--bottom-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="[bottom]: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 [bottom]::before" style="--bottom-before: /* value */;" />

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

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

CLS Alert

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

.[bottom] Offsets an element from the bottom edge using raw --bottom. Best for absolute/fixed positioning.

left

Sets left offset via --left. Scaled by spacing unit. Use [left] for raw values.

CSS Rules 

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

Usage

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

Responsive

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

<element class="md:left" style="--md-left: /* 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="left:hover" style="--left-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="left: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 left::before" style="--left-before: /* value */;" />

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

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

CLS Alert

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

.left Sets left offset via --left. Scaled by spacing unit. Use [left] for raw values.

[left]

Offsets an element from the left edge using raw --left. Best for absolute/fixed positioning.

CSS Rules 

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

Usage

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

Responsive

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

<element class="md:[left]" style="--md-left: /* 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="[left]:hover" style="--left-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="[left]: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 [left]::before" style="--left-before: /* value */;" />

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

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

CLS Alert

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

.[left] Offsets an element from the left edge using raw --left. Best for absolute/fixed positioning.

inset

Sets all side offsets via --inset. Scaled by spacing unit. Use [inset] for raw values.

CSS Rules 

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

Usage

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

Responsive

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

<element class="md:inset" style="--md-inset: /* 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="inset:hover" style="--inset-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="inset: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 inset::before" style="--inset-before: /* value */;" />

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

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

CLS Alert

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

.inset Sets all side offsets via --inset. Scaled by spacing unit. Use [inset] for raw values.

[inset]

Applies raw --inset to all four offsets. Shortcut for top/right/bottom/left positioning.

CSS Rules 

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

Usage

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

Responsive

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

<element class="md:[inset]" style="--md-inset: /* 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="[inset]:hover" style="--inset-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="[inset]: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 [inset]::before" style="--inset-before: /* value */;" />

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

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

CLS Alert

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

.[inset] Applies raw --inset to all four offsets. Shortcut for top/right/bottom/left positioning.

start

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

CSS Rules 

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

Usage

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

Responsive

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

<element class="md:start" style="--md-start: /* 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="start:hover" style="--start-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="start: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 start::before" style="--start-before: /* value */;" />

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

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

CLS Alert

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

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

[start]

Applies raw --start directly to inset-inline-start. Use start for spacing-scaled values.

CSS Rules 

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

Usage

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

Responsive

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

<element class="md:[start]" style="--md-start: /* 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="[start]:hover" style="--start-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="[start]: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 [start]::before" style="--start-before: /* value */;" />

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

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

CLS Alert

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

.[start] Applies raw --start directly to inset-inline-start. Use start for spacing-scaled values.

end

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

CSS Rules 

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

Usage

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

Responsive

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

<element class="md:end" style="--md-end: /* 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="end:hover" style="--end-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="end: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 end::before" style="--end-before: /* value */;" />

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

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

CLS Alert

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

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

[end]

Applies raw --end directly to inset-inline-end. Use end for spacing-scaled values.

CSS Rules 

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

Usage

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

Responsive

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

<element class="md:[end]" style="--md-end: /* 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="[end]:hover" style="--end-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="[end]: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 [end]::before" style="--end-before: /* value */;" />

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

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

CLS Alert

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

.[end] Applies raw --end directly to inset-inline-end. Use end for spacing-scaled values.

inset-x

Sets inline-axis insets via --inset-x. Scaled by spacing unit. Use [inset-x] for raw values.

CSS Rules 

.inset-x {
  inset-inline: calc(var(--spacing) * var(--inset-x));
}

Usage

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

Responsive

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

<element class="md:inset-x" style="--md-inset-x: /* 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="inset-x:hover" style="--inset-x-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="inset-x: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 inset-x::before" style="--inset-x-before: /* value */;" />

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

<!-- Output -->
<element class="inset-x" style="--inset-x: value;" />

CLS Alert

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

.inset-x Sets inline-axis insets via --inset-x. Scaled by spacing unit. Use [inset-x] for raw values.

[inset-x]

Applies raw --inset-x directly to inline-axis insets. Use inset-x for spacing-scaled values.

CSS Rules 

.\[inset-x\] {
  inset-inline: var(--inset-x);
}

Usage

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

Responsive

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

<element class="md:[inset-x]" style="--md-inset-x: /* 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="[inset-x]:hover" style="--inset-x-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="[inset-x]: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 [inset-x]::before" style="--inset-x-before: /* value */;" />

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

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

CLS Alert

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

.[inset-x] Applies raw --inset-x directly to inline-axis insets. Use inset-x for spacing-scaled values.

inset-y

Sets block-axis insets via --inset-y. Scaled by spacing unit. Use [inset-y] for raw values.

CSS Rules 

.inset-y {
  inset-block: calc(var(--spacing) * var(--inset-y));
}

Usage

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

Responsive

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

<element class="md:inset-y" style="--md-inset-y: /* 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="inset-y:hover" style="--inset-y-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="inset-y: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 inset-y::before" style="--inset-y-before: /* value */;" />

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

<!-- Output -->
<element class="inset-y" style="--inset-y: value;" />

CLS Alert

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

.inset-y Sets block-axis insets via --inset-y. Scaled by spacing unit. Use [inset-y] for raw values.

[inset-y]

Applies raw --inset-y directly to block-axis insets. Use inset-y for spacing-scaled values.

CSS Rules 

.\[inset-y\] {
  inset-block: var(--inset-y);
}

Usage

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

Responsive

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

<element class="md:[inset-y]" style="--md-inset-y: /* 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="[inset-y]:hover" style="--inset-y-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="[inset-y]: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 [inset-y]::before" style="--inset-y-before: /* value */;" />

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

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

CLS Alert

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

.[inset-y] Applies raw --inset-y directly to block-axis insets. Use inset-y for spacing-scaled values.

top-full

Sets top offset to 100% of the containing block.

CSS Rules 

.top-full {
  top: 100%;
}

Usage 

<element class="top-full" />

Responsive

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

<element class="md:top-full" />

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="top-full: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="top-full: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 top-full::before" />

<element class="content-after top-full::after" />
 .top-full Sets top offset to 100% of the containing block.

top-auto

Sets top offset to auto, removing explicit top positioning.

CSS Rules 

.top-auto {
  top: auto;
}

Usage 

<element class="top-auto" />

Responsive

Prefix .top-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:top-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="top-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="top-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 top-auto::before" />

<element class="content-after top-auto::after" />
 .top-auto Sets top offset to auto, removing explicit top positioning.

right-full

Sets right offset to 100% of the containing block.

CSS Rules 

.right-full {
  right: 100%;
}

Usage 

<element class="right-full" />

Responsive

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

<element class="md:right-full" />

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="right-full: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="right-full: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 right-full::before" />

<element class="content-after right-full::after" />
 .right-full Sets right offset to 100% of the containing block.

right-auto

Sets right offset to auto, removing explicit right positioning.

CSS Rules 

.right-auto {
  right: auto;
}

Usage 

<element class="right-auto" />

Responsive

Prefix .right-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:right-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="right-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="right-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 right-auto::before" />

<element class="content-after right-auto::after" />
 .right-auto Sets right offset to auto, removing explicit right positioning.

bottom-full

Sets bottom offset to 100% of the containing block.

CSS Rules 

.bottom-full {
  bottom: 100%;
}

Usage 

<element class="bottom-full" />

Responsive

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

<element class="md:bottom-full" />

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="bottom-full: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="bottom-full: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 bottom-full::before" />

<element class="content-after bottom-full::after" />
 .bottom-full Sets bottom offset to 100% of the containing block.

bottom-auto

Sets bottom offset to auto, removing explicit bottom positioning.

CSS Rules 

.bottom-auto {
  bottom: auto;
}

Usage 

<element class="bottom-auto" />

Responsive

Prefix .bottom-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:bottom-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="bottom-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="bottom-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 bottom-auto::before" />

<element class="content-after bottom-auto::after" />
 .bottom-auto Sets bottom offset to auto, removing explicit bottom positioning.

left-full

Sets left offset to 100% of the containing block.

CSS Rules 

.left-full {
  left: 100%;
}

Usage 

<element class="left-full" />

Responsive

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

<element class="md:left-full" />

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="left-full: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="left-full: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 left-full::before" />

<element class="content-after left-full::after" />
 .left-full Sets left offset to 100% of the containing block.

left-auto

Sets left offset to auto, removing explicit left positioning.

CSS Rules 

.left-auto {
  left: auto;
}

Usage 

<element class="left-auto" />

Responsive

Prefix .left-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:left-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="left-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="left-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 left-auto::before" />

<element class="content-after left-auto::after" />
 .left-auto Sets left offset to auto, removing explicit left positioning.

inset-full

Sets all inset offsets (top/right/bottom/left) to 100% of the containing block.

CSS Rules 

.inset-full {
  inset: 100%;
}

Usage 

<element class="inset-full" />

Responsive

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

<element class="md:inset-full" />

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="inset-full: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="inset-full: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 inset-full::before" />

<element class="content-after inset-full::after" />
 .inset-full Sets all inset offsets (top/right/bottom/left) to 100% of the containing block.

inset-auto

Sets all inset offsets to auto, removing explicit positioning on every side.

CSS Rules 

.inset-auto {
  inset: auto;
}

Usage 

<element class="inset-auto" />

Responsive

Prefix .inset-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:inset-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="inset-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="inset-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 inset-auto::before" />

<element class="content-after inset-auto::after" />
 .inset-auto Sets all inset offsets to auto, removing explicit positioning on every side.

inset-x-full

Sets inset-inline (left/right) offsets to 100% of the containing block.

CSS Rules 

.inset-x-full {
  inset-inline: 100%;
}

Usage 

<element class="inset-x-full" />

Responsive

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

<element class="md:inset-x-full" />

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="inset-x-full: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="inset-x-full: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 inset-x-full::before" />

<element class="content-after inset-x-full::after" />
 .inset-x-full Sets inset-inline (left/right) offsets to 100% of the containing block.

inset-y-full

Sets inset-block (top/bottom) offsets to 100% of the containing block.

CSS Rules 

.inset-y-full {
  inset-block: 100%;
}

Usage 

<element class="inset-y-full" />

Responsive

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

<element class="md:inset-y-full" />

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="inset-y-full: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="inset-y-full: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 inset-y-full::before" />

<element class="content-after inset-y-full::after" />
 .inset-y-full Sets inset-block (top/bottom) offsets to 100% of the containing block.

start-full

Sets logical inline-start offset to 100%, respecting writing direction.

CSS Rules 

.start-full {
  inset-inline-start: 100%;
}

Usage 

<element class="start-full" />

Responsive

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

<element class="md:start-full" />

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="start-full: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="start-full: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 start-full::before" />

<element class="content-after start-full::after" />
 .start-full Sets logical inline-start offset to 100%, respecting writing direction.

end-full

Sets logical inline-end offset to 100%, respecting writing direction.

CSS Rules 

.end-full {
  inset-inline-end: 100%;
}

Usage 

<element class="end-full" />

Responsive

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

<element class="md:end-full" />

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="end-full: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="end-full: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 end-full::before" />

<element class="content-after end-full::after" />
 .end-full Sets logical inline-end offset to 100%, respecting writing direction.