zfb
GitHub repository

Type to search...

to open search from anywhere

Inset

Set physical offsets with spacing values, fractions, auto, or full.

Use inset utilities to place a positioned box against its containing block with spacing values or fractions. inset sets all four edges, inset-x and inset-y set a pair, and top/right/bottom/left target one edge.

Quick reference

Example classExpected declarations
inset-4top: 1rem; right: 1rem; bottom: 1rem; left: 1rem;
inset-x-4left: 1rem; right: 1rem;
inset-y-4top: 1rem; bottom: 1rem;
top-0top: 0;
right-0right: 0;
bottom-0bottom: 0;
left-0left: 0;
-top-2top: -0.5rem;
left-nudgeleft: var(--zw-spacing-nudge);
Example setup

Every preview explicitly starts from spec 1, reset "none", strict mode, spacingUnit "0.25rem", and no breakpoints. Numeric spacing values multiply that unit; no Tailwind theme is inherited. wind-demo classes are authored presentation scaffolding, with their CSS shown beside the exact HTML source.

Examples in use

Set all four offsets

inset-4 applies a 1rem offset to each edge of this absolutely positioned box.

Set all four offsets
HTML
<div class="wind-demo">
  <div class="wind-demo-frame relative w-72 h-36">
    <div class="absolute inset-4 wind-demo-highlight">Same offset on all four sides</div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-highlight {
  background: #f2d794;
  color: #493810;
  border: 1px solid #b39761;
  text-align: center;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.inset-4 {
  top: 1rem;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
}
.h-36 {
  height: 9rem;
}
.w-72 {
  width: 18rem;
}
Configuration for this example
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-highlight": true
    },
    "safelist": {
      "docs-preview": [
        "absolute",
        "h-36",
        "inset-4",
        "relative",
        "w-72"
      ]
    }
  }
}
Authored demonstration CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-highlight { background: #f2d794; color: #493810; border: 1px solid #b39761; text-align: center; }

Set a pair of edges

inset-x-4 moves the left and right edges; inset-y-4 moves the top and bottom edges.

Set a pair of edges
HTML
<div class="wind-demo">
  <div class="wind-demo-frame relative w-72 h-36">
    <div class="absolute inset-x-4 top-4 h-10 wind-demo-tile">Left and right inset</div>
    <div class="absolute inset-y-4 right-4 w-12 wind-demo-alt">Top and bottom inset</div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-alt {
  border-color: #b39761;
  background: #efe5cb;
  color: #483a1d;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.inset-x-4 {
  left: 1rem;
  right: 1rem;
}
.inset-y-4 {
  top: 1rem;
  bottom: 1rem;
}
.right-4 {
  right: 1rem;
}
.top-4 {
  top: 1rem;
}
.h-10 {
  height: 2.5rem;
}
.h-36 {
  height: 9rem;
}
.w-12 {
  width: 3rem;
}
.w-72 {
  width: 18rem;
}
Configuration for this example
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-alt": true,
      "wind-demo-frame": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "absolute",
        "h-10",
        "h-36",
        "inset-x-4",
        "inset-y-4",
        "relative",
        "right-4",
        "top-4",
        "w-12",
        "w-72"
      ]
    }
  }
}
Authored demonstration CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-alt { border-color: #b39761; background: #efe5cb; color: #483a1d; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

Pin to individual corners

top-0, right-0, bottom-0, and left-0 align each tile with one corner of the relative frame.

Pin to individual corners
HTML
<div class="wind-demo">
  <div class="wind-demo-frame relative w-72 h-36">
    <div class="absolute top-0 left-0 size-8 wind-demo-tile">TL</div>
    <div class="absolute top-0 right-0 size-8 wind-demo-alt">TR</div>
    <div class="absolute bottom-0 left-0 size-8 wind-demo-alt">BL</div>
    <div class="absolute bottom-0 right-0 size-8 wind-demo-tile">BR</div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-alt {
  border-color: #b39761;
  background: #efe5cb;
  color: #483a1d;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.bottom-0 {
  bottom: 0;
}
.left-0 {
  left: 0;
}
.right-0 {
  right: 0;
}
.top-0 {
  top: 0;
}
.size-8 {
  width: 2rem;
  height: 2rem;
}
.h-36 {
  height: 9rem;
}
.w-72 {
  width: 18rem;
}
Configuration for this example
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-alt": true,
      "wind-demo-frame": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "absolute",
        "bottom-0",
        "h-36",
        "left-0",
        "relative",
        "right-0",
        "size-8",
        "top-0",
        "w-72"
      ]
    }
  }
}
Authored demonstration CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-alt { border-color: #b39761; background: #efe5cb; color: #483a1d; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

Use a negative offset and a named token

-top-2 moves upward by 0.5rem; left-nudge resolves the configured tokens.spacing.nudge value.

Use a negative offset and a named token
HTML
<div class="wind-demo">
  <div class="wind-demo-frame relative w-72 h-36">
    <div class="absolute -top-2 left-nudge wind-demo-highlight">Negative top; named left token</div>
  </div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-nudge: 1rem;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-highlight {
  background: #f2d794;
  color: #493810;
  border: 1px solid #b39761;
  text-align: center;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.left-nudge {
  left: var(--zw-spacing-nudge);
}
.-top-2 {
  top: -0.5rem;
}
.h-36 {
  height: 9rem;
}
.w-72 {
  width: 18rem;
}
Configuration for this example
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "spacing": {
        "nudge": "1rem"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-highlight": true
    },
    "safelist": {
      "docs-preview": [
        "-top-2",
        "absolute",
        "h-36",
        "left-nudge",
        "relative",
        "w-72"
      ]
    }
  }
}
Authored demonstration CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-highlight { background: #f2d794; color: #493810; border: 1px solid #b39761; text-align: center; }

Custom and named values

Numeric offsets use the explicitly configured spacingUnit of 0.25rem; 4 is 1rem. The 0, px, full, and auto keywords need no token. Named values such as left-nudge require tokens.spacing; arbitrary values such as top-[calc(100%_+_8px)] are also supported. Negative forms are supported, for example -top-2. Offsets do not make an element positioned. Fractions such as left-1/2 emit left: calc(100% * 1 / 2); -top-1/2 emits top: calc(calc(100% * 1 / 2) * -1). Left/right percentages use containing-block width, while top/bottom use its height. Numerator and denominator are positive integers from 1 to 1,000,000.

Related guides: Utility grammar · Variants

Catalog details

inset

FieldValue
Catalog identifierv1.inset
Class patterninset-<suffix>
Grammar{"acceptedKinds":["keyword","token","scale","fraction","arbitrary"],"arbitraryProperty":"top","allowsFractionSlash":true,"allowsColorOpacity":false}
Accepted values4
Token categoriesspacing
Negative-value policyallowed
Conflict group and rankinset (3)
Order rank0
Selector shapeownElement
Spec version1
Emitter propertiestop, right, bottom, left

Accepted values

KindSuffixEmitted value
keyword"auto""auto"
keyword"full""100%"
keyword"0""0"
keyword"px""1px"

Declaration templates

PropertyValue kindFixed value
topresolvednull
rightresolvednull
bottomresolvednull
leftresolvednull

Catalog examples

Example classExpected declarations
inset-0top: 0; right: 0; bottom: 0; left: 0

inset-x

FieldValue
Catalog identifierv1.inset-x
Class patterninset-x-<suffix>
Grammar{"acceptedKinds":["keyword","token","scale","fraction","arbitrary"],"arbitraryProperty":"top","allowsFractionSlash":true,"allowsColorOpacity":false}
Accepted values4
Token categoriesspacing
Negative-value policyallowed
Conflict group and rankinset (3)
Order rank1
Selector shapeownElement
Spec version1
Emitter propertiesleft, right

Accepted values

KindSuffixEmitted value
keyword"auto""auto"
keyword"full""100%"
keyword"0""0"
keyword"px""1px"

Declaration templates

PropertyValue kindFixed value
leftresolvednull
rightresolvednull

Catalog examples

Example classExpected declarations
inset-x-0left: 0; right: 0

inset-y

FieldValue
Catalog identifierv1.inset-y
Class patterninset-y-<suffix>
Grammar{"acceptedKinds":["keyword","token","scale","fraction","arbitrary"],"arbitraryProperty":"top","allowsFractionSlash":true,"allowsColorOpacity":false}
Accepted values4
Token categoriesspacing
Negative-value policyallowed
Conflict group and rankinset (3)
Order rank1
Selector shapeownElement
Spec version1
Emitter propertiestop, bottom

Accepted values

KindSuffixEmitted value
keyword"auto""auto"
keyword"full""100%"
keyword"0""0"
keyword"px""1px"

Declaration templates

PropertyValue kindFixed value
topresolvednull
bottomresolvednull

Catalog examples

Example classExpected declarations
inset-y-0top: 0; bottom: 0

bottom

FieldValue
Catalog identifierv1.bottom
Class patternbottom-<suffix>
Grammar{"acceptedKinds":["keyword","token","scale","fraction","arbitrary"],"arbitraryProperty":"top","allowsFractionSlash":true,"allowsColorOpacity":false}
Accepted values4
Token categoriesspacing
Negative-value policyallowed
Conflict group and rankinset (3)
Order rank2
Selector shapeownElement
Spec version1
Emitter propertiesbottom

Accepted values

KindSuffixEmitted value
keyword"auto""auto"
keyword"full""100%"
keyword"0""0"
keyword"px""1px"

Declaration templates

PropertyValue kindFixed value
bottomresolvednull

Catalog examples

Example classExpected declarations
bottom-0bottom: 0

left

FieldValue
Catalog identifierv1.left
Class patternleft-<suffix>
Grammar{"acceptedKinds":["keyword","token","scale","fraction","arbitrary"],"arbitraryProperty":"top","allowsFractionSlash":true,"allowsColorOpacity":false}
Accepted values4
Token categoriesspacing
Negative-value policyallowed
Conflict group and rankinset (3)
Order rank2
Selector shapeownElement
Spec version1
Emitter propertiesleft

Accepted values

KindSuffixEmitted value
keyword"auto""auto"
keyword"full""100%"
keyword"0""0"
keyword"px""1px"

Declaration templates

PropertyValue kindFixed value
leftresolvednull

Catalog examples

Example classExpected declarations
left-0left: 0

right

FieldValue
Catalog identifierv1.right
Class patternright-<suffix>
Grammar{"acceptedKinds":["keyword","token","scale","fraction","arbitrary"],"arbitraryProperty":"top","allowsFractionSlash":true,"allowsColorOpacity":false}
Accepted values4
Token categoriesspacing
Negative-value policyallowed
Conflict group and rankinset (3)
Order rank2
Selector shapeownElement
Spec version1
Emitter propertiesright

Accepted values

KindSuffixEmitted value
keyword"auto""auto"
keyword"full""100%"
keyword"0""0"
keyword"px""1px"

Declaration templates

PropertyValue kindFixed value
rightresolvednull

Catalog examples

Example classExpected declarations
right-0right: 0

top

FieldValue
Catalog identifierv1.top
Class patterntop-<suffix>
Grammar{"acceptedKinds":["keyword","token","scale","fraction","arbitrary"],"arbitraryProperty":"top","allowsFractionSlash":true,"allowsColorOpacity":false}
Accepted values4
Token categoriesspacing
Negative-value policyallowed
Conflict group and rankinset (3)
Order rank2
Selector shapeownElement
Spec version1
Emitter propertiestop

Accepted values

KindSuffixEmitted value
keyword"auto""auto"
keyword"full""100%"
keyword"0""0"
keyword"px""1px"

Declaration templates

PropertyValue kindFixed value
topresolvednull

Catalog examples

Example classExpected declarations
top-0top: 0

Revision History

CreatedUpdated