0build.dev
Choose a layout

padding

Report an Issue
Class Description

p

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

CSS Rules 

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

Usage

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

Responsive

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

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

States

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

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

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

Group Hover Example

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

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

Pseudo-Elements

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

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

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

Shorthand

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

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

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

CLS Alert

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

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

[p]

Sets padding on all sides directly via --p. Raw inner spacing. Use p for spacing-scaled padding.

CSS Rules 

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

Usage

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

Responsive

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

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

States

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

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

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

Group Hover Example

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

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

Pseudo-Elements

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

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

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

Shorthand

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

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

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

CLS Alert

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

.[p] Sets padding on all sides directly via --p. Raw inner spacing. Use p for spacing-scaled padding.

pt

Sets padding-top via --pt. Scaled.

CSS Rules 

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

Usage

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

Responsive

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

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

States

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

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

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

Group Hover Example

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

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

Pseudo-Elements

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

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

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

Shorthand

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

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

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

CLS Alert

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

.pt Sets padding-top via --pt. Scaled.

pb

Sets padding-bottom via --pb. Scaled.

CSS Rules 

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

Usage

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

Responsive

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

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

States

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

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

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

Group Hover Example

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

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

Pseudo-Elements

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

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

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

Shorthand

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

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

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

CLS Alert

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

.pb Sets padding-bottom via --pb. Scaled.

pl

Sets padding-left via --pl. Scaled.

CSS Rules 

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

Usage

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

Responsive

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

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

States

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

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

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

Group Hover Example

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

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

Pseudo-Elements

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

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

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

Shorthand

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

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

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

CLS Alert

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

.pl Sets padding-left via --pl. Scaled.

pr

Sets padding-right via --pr. Scaled.

CSS Rules 

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

Usage

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

Responsive

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

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

States

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

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

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

Group Hover Example

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

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

Pseudo-Elements

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

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

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

Shorthand

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

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

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

CLS Alert

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

.pr Sets padding-right via --pr. Scaled.

ps

Sets padding-inline-start (logical) via --ps. Scaled.

CSS Rules 

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

Usage

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

Responsive

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

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

States

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

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

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

Group Hover Example

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

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

Pseudo-Elements

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

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

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

Shorthand

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

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

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

CLS Alert

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

.ps Sets padding-inline-start (logical) via --ps. Scaled.

pe

Sets padding-inline-end (logical) via --pe. Scaled.

CSS Rules 

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

Usage

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

Responsive

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

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

States

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

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

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

Group Hover Example

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

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

Pseudo-Elements

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

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

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

Shorthand

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

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

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

CLS Alert

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

.pe Sets padding-inline-end (logical) via --pe. Scaled.

[pt]

Sets top padding directly via --pt. Raw inner spacing above content.

CSS Rules 

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

Usage

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

Responsive

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

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

States

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

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

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

Group Hover Example

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

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

Pseudo-Elements

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

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

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

Shorthand

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

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

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

CLS Alert

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

.[pt] Sets top padding directly via --pt. Raw inner spacing above content.

[pb]

Sets bottom padding directly via --pb. Raw inner spacing below content.

CSS Rules 

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

Usage

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

Responsive

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

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

States

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

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

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

Group Hover Example

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

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

Pseudo-Elements

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

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

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

Shorthand

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

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

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

CLS Alert

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

.[pb] Sets bottom padding directly via --pb. Raw inner spacing below content.

[pl]

Sets left padding directly via --pl. Raw inner spacing to the left of content.

CSS Rules 

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

Usage

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

Responsive

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

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

States

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

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

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

Group Hover Example

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

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

Pseudo-Elements

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

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

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

Shorthand

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

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

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

CLS Alert

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

.[pl] Sets left padding directly via --pl. Raw inner spacing to the left of content.

[pr]

Sets right padding directly via --pr. Raw inner spacing to the right of content.

CSS Rules 

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

Usage

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

Responsive

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

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

States

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

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

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

Group Hover Example

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

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

Pseudo-Elements

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

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

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

Shorthand

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

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

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

CLS Alert

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

.[pr] Sets right padding directly via --pr. Raw inner spacing to the right of content.

[ps]

Sets inline-start padding directly via --ps. Raw logical inner spacing at the start edge.

CSS Rules 

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

Usage

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

Responsive

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

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

States

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

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

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

Group Hover Example

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

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

Pseudo-Elements

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

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

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

Shorthand

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

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

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

CLS Alert

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

.[ps] Sets inline-start padding directly via --ps. Raw logical inner spacing at the start edge.

[pe]

Sets inline-end padding directly via --pe. Raw logical inner spacing at the end edge.

CSS Rules 

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

Usage

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

Responsive

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

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

States

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

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

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

Group Hover Example

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

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

Pseudo-Elements

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

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

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

Shorthand

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

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

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

CLS Alert

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

.[pe] Sets inline-end padding directly via --pe. Raw logical inner spacing at the end edge.

px

Sets horizontal padding (left & right) via --px. Scaled.

CSS Rules 

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

Usage

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

Responsive

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

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

States

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

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

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

Group Hover Example

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

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

Pseudo-Elements

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

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

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

Shorthand

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

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

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

CLS Alert

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

.px Sets horizontal padding (left & right) via --px. Scaled.

py

Sets vertical padding (top & bottom) via --py. Scaled.

CSS Rules 

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

Usage

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

Responsive

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

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

States

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

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

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

Group Hover Example

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

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

Pseudo-Elements

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

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

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

Shorthand

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

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

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

CLS Alert

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

.py Sets vertical padding (top & bottom) via --py. Scaled.

[px]

Sets inline-axis padding directly via --px. Raw inner spacing on start/end edges.

CSS Rules 

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

Usage

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

Responsive

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

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

States

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

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

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

Group Hover Example

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

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

Pseudo-Elements

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

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

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

Shorthand

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

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

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

CLS Alert

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

.[px] Sets inline-axis padding directly via --px. Raw inner spacing on start/end edges.

[py]

Sets block-axis padding directly via --py. Raw inner spacing above and below content.

CSS Rules 

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

Usage

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

Responsive

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

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

States

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

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

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

Group Hover Example

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

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

Pseudo-Elements

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

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

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

Shorthand

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

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

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

CLS Alert

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

.[py] Sets block-axis padding directly via --py. Raw inner spacing above and below content.