Width

Set element width

Syntax

space="w:[value]"

Values

Property	CSS Output	Description
w	width: var(--s-{value})	Width
min-w	min-width: var(--s-{value})	Minimum width
max-w	max-width: var(--s-{value})	Maximum width

Scale Values

none, thin, regular, thick, tiny, tiny-2x, small, small-2x, small-3x, small-4x, medium, medium-2x, medium-3x, medium-4x, large, large-2x, large-3x, large-4x, big, big-2x, big-3x, big-4x, giant, giant-2x, giant-3x, giant-4x, vast, vast-2x, vast-3x, vast-4x, vast-5x, vast-6x, vast-7x, vast-8x, vast-9x, vast-10x, min, max, fit, full, half, third, third-2x, quarter, quarter-2x, quarter-3x, 1/1, 1/2, 1/3, 2/3, 1/4, 2/4, 3/4

Examples

<div space="w:full">Full width</div>
<div space="w:half">Half width</div>
<div space="w:third">Third width</div>
<div space="w:quarter-3x">Three quarters</div>
<div space="max-w:[1200px]">Max width container</div>
<div space="w:max">Content width</div>

Preview

Width Control

space="w:full" - Set fixed or percentage widths

w:full

w:quarter-3x

w:half

View Code

<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div space="w:full p:small" visual="bg:primary text:white rounded:small">w:full</div>
  <div space="w:quarter-3x p:small" visual="bg:primary text:white rounded:small">w:quarter-3x</div>
  <div space="w:half p:small" visual="bg:primary text:white rounded:small">w:half</div>
</div>

Content-Based Sizing

space="w:max" - Use min, max, or fit for content-based sizing

w:min shrinks to minimum

w:max expands to fit all content without wrapping

w:fit adapts to available space while respecting content

View Code

<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div space="w:min p:small m-b:small" visual="bg:primary text:white rounded:small">w:min shrinks to minimum</div>
  <div space="w:max p:small m-b:small" visual="bg:pink-600 text:white rounded:small">w:max expands to fit all content without wrapping</div>
  <div space="w:fit p:small" visual="bg:green-600 text:white rounded:small">w:fit adapts to available space while respecting content</div>
</div>

Max Width with Content Values

space="max-w:min" - Constrain maximum width using content values

max-w:min - Text will wrap to minimum width needed

max-w:max - Expands to content

max-w:[200px] - Fixed max

View Code

<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div space="max-w:min p:small m-b:small" visual="bg:primary text:white rounded:small">max-w:min - Text will wrap to minimum width needed</div>
  <div space="max-w:max p:small m-b:small" visual="bg:pink-600 text:white rounded:small">max-w:max - Expands to content</div>
  <div space="max-w:[200px] p:small" visual="bg:green-600 text:white rounded:small">max-w:[200px] - Fixed max</div>
</div>

Arbitrary Values

Supports custom values using bracket syntax:

<div space="width:[custom-value]">Custom</div>

Notes

TIP

Tailwind Scale Support

Use tw- prefix to access Tailwind numeric scale: w:tw-64 (16rem), max-w:tw-96 (24rem)

Reference