Negative Values

Use Negative Values

Put a minus sign in front of the value, after the colon: ml:-4 is a margin of -1rem.

Only properties that accept a negative value take one: margins, positioning, z-index, letter spacing, text indent, order, grid lines, scroll margins, outline & underline offsets, rotate, scale, translate, skew & transition delay. On any other utility the class is refused, so p:-4 & w:-4 produce nothing.

Margin

Use negative margins to overlap elements or create unique layouts. Negative margins are available for all margin utilities (m:, mt:, mr:, mb:, ml:, mx: & my:).

<div className="zi:10 …">A</div>
<div className="ml:-4 zi:20 …">B</div>
<div className="ml:-4 zi:30 …">C</div>

Positioning

Apply negative offsets to position elements outside their parents or create overlapping effects. This works with the t:, r:, b:, l: & i: utilities.

<div className="p:r …">
  <div className="p:a t:-4 l:-4 …"></div>
</div>

Z-Index

Negative z-index values allow you to place elements behind their siblings or parents. Use zi:-(value) to target negative stack levels.

<div className="p:r …">
  <div className="p:a zi:-10 …"></div>
  <span>Background Layer</span>
</div>

Sign Toggle

The minus sign flips the sign of the utility's value, which matters for utilities whose value is already negative.

Letter Spacing

Utilities like ls:1 & ls:2 are defined with negative CSS values. Using the sign-toggle syntax ls:-1 or ls:-2 flips these to positive values, resulting in wider spacing instead of tighter spacing.

<p className="ls:1 …">Standard (Tight)</p>
<p className="ls:-1 …">Negated (Wide)</p>