0build.dev
Choose a layout

size

Report an Issue
Class Description

size

Sets width and height together via --size. Scaled by spacing unit. Use [size] for raw dimensions.

CSS Rules 

.size {
  width: calc(var(--spacing) * var(--size));
  height: calc(var(--spacing) * var(--size));
}

Usage

The .size class is flagged as a value-driven selector. The variables --size and --size are required. 
<element
  class="size"
  style="
    --size: /* value */;
    --size: /* value */;
  "
></element>

Responsive

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

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

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="size:hover"
  style="
    --size-hover: /* value */;
    --size-hover: /* value */;
  "
></element>

Group Hover Example

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

<element class="group">
  <element class="size: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 size::before"
  style="
    --size-before: /* value */;
    --size-before: /* value */;
  "
></element>

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

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="size=value" />

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

CLS Alert

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

.size Sets width and height together via --size. Scaled by spacing unit. Use [size] for raw dimensions.

[size]

Applies raw --size directly to width and height. Use size for spacing-scaled dimensions.

CSS Rules 

.\[size\] {
  width: var(--size);
  height: var(--size);
}

Usage

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

Responsive

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

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

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

Group Hover Example

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

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

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

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="[size]=value" />

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

CLS Alert

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

.[size] Applies raw --size directly to width and height. Use size for spacing-scaled dimensions.

size-auto

Sets both width and height to auto.

CSS Rules 

.size-auto {
  width: auto;
  height: auto;
}

Usage 

<element class="size-auto" />

Responsive

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

<element class="content-after size-auto::after" />
 .size-auto Sets both width and height to auto.

size-full

Sets both width and height to 100%.

CSS Rules 

.size-full {
  width: 100%;
  height: 100%;
}

Usage 

<element class="size-full" />

Responsive

Prefix .size-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:size-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="size-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="size-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 size-full::before" />

<element class="content-after size-full::after" />
 .size-full Sets both width and height to 100%.

size-dvw

Sets both width and height to 100 dynamic viewport widths.

CSS Rules 

.size-dvw {
  width: 100dvw;
  height: 100dvw;
}

Usage 

<element class="size-dvw" />

Responsive

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

<element class="md:size-dvw" />

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="size-dvw: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="size-dvw: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 size-dvw::before" />

<element class="content-after size-dvw::after" />
 .size-dvw Sets both width and height to 100 dynamic viewport widths.

size-dvh

Sets both width and height to 100% of the dynamic viewport height (100dvh).

CSS Rules 

.size-dvh {
  width: 100dvh;
  height: 100dvh;
}

Usage 

<element class="size-dvh" />

Responsive

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

<element class="md:size-dvh" />

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="size-dvh: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="size-dvh: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 size-dvh::before" />

<element class="content-after size-dvh::after" />
 .size-dvh Sets both width and height to 100% of the dynamic viewport height (100dvh).

size-lvw

Sets both width and height to 100% of the large viewport width (100lvw).

CSS Rules 

.size-lvw {
  width: 100lvw;
  height: 100lvw;
}

Usage 

<element class="size-lvw" />

Responsive

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

<element class="md:size-lvw" />

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="size-lvw: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="size-lvw: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 size-lvw::before" />

<element class="content-after size-lvw::after" />
 .size-lvw Sets both width and height to 100% of the large viewport width (100lvw).

size-lvh

Sets both width and height to 100% of the large viewport height (100lvh).

CSS Rules 

.size-lvh {
  width: 100lvh;
  height: 100lvh;
}

Usage 

<element class="size-lvh" />

Responsive

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

<element class="md:size-lvh" />

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="size-lvh: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="size-lvh: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 size-lvh::before" />

<element class="content-after size-lvh::after" />
 .size-lvh Sets both width and height to 100% of the large viewport height (100lvh).

size-svw

Sets both width and height to 100% of the small viewport width (100svw).

CSS Rules 

.size-svw {
  width: 100svw;
  height: 100svw;
}

Usage 

<element class="size-svw" />

Responsive

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

<element class="md:size-svw" />

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="size-svw: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="size-svw: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 size-svw::before" />

<element class="content-after size-svw::after" />
 .size-svw Sets both width and height to 100% of the small viewport width (100svw).

size-svh

Sets both width and height to 100% of the small viewport height (100svh).

CSS Rules 

.size-svh {
  width: 100svh;
  height: 100svh;
}

Usage 

<element class="size-svh" />

Responsive

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

<element class="md:size-svh" />

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="size-svh: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="size-svh: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 size-svh::before" />

<element class="content-after size-svh::after" />
 .size-svh Sets both width and height to 100% of the small viewport height (100svh).

size-min

Sets both width and height to their intrinsic min-content size.

CSS Rules 

.size-min {
  width: min-content;
  height: min-content;
}

Usage 

<element class="size-min" />

Responsive

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

<element class="md:size-min" />

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="size-min: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="size-min: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 size-min::before" />

<element class="content-after size-min::after" />
 .size-min Sets both width and height to their intrinsic min-content size.

size-max

Sets both width and height to their intrinsic max-content size.

CSS Rules 

.size-max {
  width: max-content;
  height: max-content;
}

Usage 

<element class="size-max" />

Responsive

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

<element class="md:size-max" />

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="size-max: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="size-max: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 size-max::before" />

<element class="content-after size-max::after" />
 .size-max Sets both width and height to their intrinsic max-content size.

size-fit

Sets both width and height to fit-content, sizing based on the element's content within constraints.

CSS Rules 

.size-fit {
  width: fit-content;
  height: fit-content;
}

Usage 

<element class="size-fit" />

Responsive

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

<element class="md:size-fit" />

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="size-fit: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="size-fit: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 size-fit::before" />

<element class="content-after size-fit::after" />
 .size-fit Sets both width and height to fit-content, sizing based on the element's content within constraints.