0build.dev
Choose a layout

border-spacing

Report an Issue
Class Description

border-spacing

Sets spacing between separated table cell borders via --border-spacing. Requires border-separate. Scaled.

CSS Rules 

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

Usage

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

Responsive

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

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

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

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

CLS Alert

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

.border-spacing Sets spacing between separated table cell borders via --border-spacing. Requires border-separate. Scaled.

[border-spacing]

Applies raw --border-spacing directly to spacing between table cell borders.

CSS Rules 

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

Usage

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

Responsive

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

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

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

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

CLS Alert

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

.[border-spacing] Applies raw --border-spacing directly to spacing between table cell borders.

border-spacing-x

Sets horizontal table cell spacing via --border-spacing-x. Scaled by spacing unit. Use [border-spacing-x] for raw values.

CSS Rules 

.border-spacing-x {
  --tw-border-spacing-x: calc(var(--spacing) * var(--border-spacing-x));
  border-spacing: calc(var(--spacing) * var(--border-spacing-x));
}

Usage

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

Responsive

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

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

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

.border-spacing-x Sets horizontal table cell spacing via --border-spacing-x. Scaled by spacing unit. Use [border-spacing-x] for raw values.

[border-spacing-x]

Applies raw --border-spacing-x directly to horizontal table cell spacing.

CSS Rules 

.\[border-spacing-x\] {
  --tw-border-spacing-x: var(--border-spacing-x);
  border-spacing: var(--border-spacing-x);
}

Usage

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

Responsive

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

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

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

.[border-spacing-x] Applies raw --border-spacing-x directly to horizontal table cell spacing.

border-spacing-y

Sets vertical table cell spacing via --border-spacing-y. Scaled by spacing unit. Use [border-spacing-y] for raw values.

CSS Rules 

.border-spacing-y {
  --tw-border-spacing-y: calc(var(--spacing) * var(--border-spacing-y));
  border-spacing: calc(var(--spacing) * var(--border-spacing-y));
}

Usage

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

Responsive

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

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

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

.border-spacing-y Sets vertical table cell spacing via --border-spacing-y. Scaled by spacing unit. Use [border-spacing-y] for raw values.

[border-spacing-y]

Applies raw --border-spacing-y directly to vertical table cell spacing.

CSS Rules 

.\[border-spacing-y\] {
  --tw-border-spacing-y: var(--border-spacing-y);
  border-spacing: var(--border-spacing-y);
}

Usage

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

Responsive

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

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

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

.[border-spacing-y] Applies raw --border-spacing-y directly to vertical table cell spacing.