Text decoration

Set text-decoration color, thickness, or style with the catalog values.

Set text-decoration color, thickness, or style on an element with a visible underline, overline, or other text decoration.

Quick reference

Example class	Expected declarations
`decoration-accent`	`text-decoration-color: var(--zw-color-accent);`
`decoration-2`	`text-decoration-thickness: 2px;`
`decoration-solid`	`text-decoration-style: solid;`
`decoration-double`	`text-decoration-style: double;`
`decoration-dotted`	`text-decoration-style: dotted;`
`decoration-dashed`	`text-decoration-style: dashed;`
`decoration-wavy`	`text-decoration-style: wavy;`
`decoration-[#b42318]/80`	`text-decoration-color: color-mix(in oklab, #b42318 80%, transparent);`

Example setup

The shared preview base explicitly selects spec 1, reset none, strict mode, spacingUnit 0.25rem, and no breakpoints. The named example declares tokens.colors.accent. Authored CSS sets a readable text color and preserves the browser’s link underline; it does not set text-decoration-color.

Examples in use

Use named and keyword colors

The configured accent, currentColor, and transparent change underline color. The same preview shows a 2px thickness and each admitted text-decoration style.

Use named and keyword colors

HTML

<p class="wind-demo-decoration">A <a href="#accent" class="decoration-accent">configured accent underline</a>, a <a href="#current" class="decoration-current">current-color underline</a>, and a <a href="#transparent" class="decoration-transparent">transparent underline</a>. <a href="#thickness" class="decoration-2">2px underline</a>; style samples: <a href="#solid" class="decoration-solid">solid</a>, <a href="#double" class="decoration-double">double</a>, <a href="#dotted" class="decoration-dotted">dotted</a>, <a href="#dashed" class="decoration-dashed">dashed</a>, <a href="#wavy" class="decoration-wavy">wavy</a>.</p>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-color-accent: #a23862;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-decoration {
  max-width: 34rem;
  color: #223247;
  border: 1px solid #b7c5d4;
  padding: .8rem;
  line-height: 1.8;
}

.wind-demo-decoration a {
  color: inherit;
}
.decoration-accent {
  text-decoration-color: var(--zw-color-accent);
}
.decoration-current {
  text-decoration-color: currentColor;
}
.decoration-transparent {
  text-decoration-color: transparent;
}
.decoration-2 {
  text-decoration-thickness: 2px;
}
.decoration-dashed {
  text-decoration-style: dashed;
}
.decoration-dotted {
  text-decoration-style: dotted;
}
.decoration-double {
  text-decoration-style: double;
}
.decoration-solid {
  text-decoration-style: solid;
}
.decoration-wavy {
  text-decoration-style: wavy;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "colors": {
        "accent": "#a23862"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-decoration": true
    },
    "safelist": {
      "docs-preview": [
        "decoration-2",
        "decoration-accent",
        "decoration-current",
        "decoration-dashed",
        "decoration-dotted",
        "decoration-double",
        "decoration-solid",
        "decoration-transparent",
        "decoration-wavy"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo-decoration { max-width: 34rem; color: #223247; border: 1px solid #b7c5d4; padding: 0.8rem; line-height: 1.8; }
.wind-demo-decoration a { color: inherit; }

Add an arbitrary color and opacity

The bracket color is parsed as CSS and /80 applies the supported opacity modifier while the text stays its inherited color.

Add an arbitrary color and opacity

HTML

<p class="wind-demo-decoration">An <a href="#custom" class="decoration-[#b42318]/80">arbitrary red decoration at 80 percent opacity</a> keeps the text color unchanged.</p>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-color-accent: #a23862;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-decoration {
  max-width: 34rem;
  color: #223247;
  border: 1px solid #b7c5d4;
  padding: .8rem;
  line-height: 1.8;
}

.wind-demo-decoration a {
  color: inherit;
}
.decoration-\[\#b42318\]\/80 {
  text-decoration-color: color-mix(in oklab, #b42318 80%, transparent);
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "colors": {
        "accent": "#a23862"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-decoration": true
    },
    "safelist": {
      "docs-preview": [
        "decoration-[#b42318]/80"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo-decoration { max-width: 34rem; color: #223247; border: 1px solid #b7c5d4; padding: 0.8rem; line-height: 1.8; }
.wind-demo-decoration a { color: inherit; }

Custom and named values

decoration-accent resolves through tokens.colors.accent. decoration-current uses the element’s current text color, and decoration-transparent keeps the decoration geometry while hiding its color. Arbitrary colors such as decoration-[#b42318] are validated by the color parser; a supported opacity modifier such as /80 mixes the color with transparency. This family has no automatic palette: every named color must be configured. Integer decoration-2 emits text-decoration-thickness: 2px; nonnegative bracketed lengths also work. Exact decoration-solid, -double, -dotted, -dashed, and -wavy set text-decoration-style. A configured full color token wins over a style spelling; negative and slash thickness/style forms are rejected. decoration-auto and decoration-from-font are not supported keywords.

Related guides: Utility grammar · Variants

Catalog details

decoration

Field	Value
Catalog identifier	`v1.decoration.color`
Class pattern	`decoration-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","arbitrary"],"arbitraryProperty":"text-decoration-color","allowsFractionSlash":false,"allowsColorOpacity":true}`
Accepted values	`2`
Token categories	`colors`
Negative-value policy	`forbidden`
Conflict group and rank	`text-decoration-color` (`45`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`text-decoration-color`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"transparent"`	`"transparent"`
`keyword`	`"current"`	`"currentColor"`

Declaration templates

Property	Value kind	Fixed value
`text-decoration-color`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`decoration-[red]/40`	`text-decoration-color: color-mix(in oklab, red 40%, transparent)`

decoration

Field	Value
Catalog identifier	`v1.decoration.thickness`
Class pattern	`decoration-<suffix>`
Grammar	`{"acceptedKinds":["integer","arbitrary"],"arbitraryProperty":"text-decoration-thickness","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	The catalog has no separate accepted-value records for this entry.
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`text-decoration-thickness` (`45`)
Order rank	`1`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`text-decoration-thickness`

Accepted values

The catalog has no separate accepted-value records for this entry.

Declaration templates

Property	Value kind	Fixed value
`text-decoration-thickness`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`decoration-2`	`text-decoration-thickness: 2px`

decoration-dashed

Field	Value
Catalog identifier	`v1.decoration.style.dashed`
Class pattern	`decoration-dashed`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`text-decoration-style` (`45`)
Order rank	`2`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`text-decoration-style`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"dashed"`

Declaration templates

Property	Value kind	Fixed value
`text-decoration-style`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`decoration-dashed`	`text-decoration-style: dashed`

decoration-dotted

Field	Value
Catalog identifier	`v1.decoration.style.dotted`
Class pattern	`decoration-dotted`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`text-decoration-style` (`45`)
Order rank	`2`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`text-decoration-style`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"dotted"`

Declaration templates

Property	Value kind	Fixed value
`text-decoration-style`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`decoration-dotted`	`text-decoration-style: dotted`

decoration-double

Field	Value
Catalog identifier	`v1.decoration.style.double`
Class pattern	`decoration-double`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`text-decoration-style` (`45`)
Order rank	`2`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`text-decoration-style`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"double"`

Declaration templates

Property	Value kind	Fixed value
`text-decoration-style`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`decoration-double`	`text-decoration-style: double`

decoration-solid

Field	Value
Catalog identifier	`v1.decoration.style.solid`
Class pattern	`decoration-solid`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`text-decoration-style` (`45`)
Order rank	`2`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`text-decoration-style`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"solid"`

Declaration templates

Property	Value kind	Fixed value
`text-decoration-style`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`decoration-solid`	`text-decoration-style: solid`

decoration-wavy

Field	Value
Catalog identifier	`v1.decoration.style.wavy`
Class pattern	`decoration-wavy`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`text-decoration-style` (`45`)
Order rank	`2`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`text-decoration-style`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"wavy"`

Declaration templates

Property	Value kind	Fixed value
`text-decoration-style`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`decoration-wavy`	`text-decoration-style: wavy`

Text decoration

Quick reference

Examples in use

Use named and keyword colors

Add an arbitrary color and opacity

Custom and named values

decoration

Accepted values

Declaration templates

Catalog examples

decoration

Accepted values

Declaration templates

Catalog examples

decoration-dashed

Accepted values

Declaration templates

Catalog examples

decoration-dotted

Accepted values

Declaration templates

Catalog examples

decoration-double

Accepted values

Declaration templates

Catalog examples

decoration-solid

Accepted values

Declaration templates

Catalog examples

decoration-wavy

Accepted values

Declaration templates

Catalog examples

Revision History