text-stroke

Setting the width and color of strokes for text characters.

Overview

Examples

Set stroke width and color together

Use text-stroke:*|* when the width and color should be declared as one text stroke value.

<h2 class="text-stroke:1px|blue-60">    Outlined title</h2>

@layer theme {    :root {        --color-blue-60: oklch(51.83% .2687 266.1)    }}@layer utilities {    .text-stroke\:1px\|blue-60 {        -webkit-text-stroke: 1px var(--color-blue-60)    }}

Combine stroke with transparent fill

Use transparent fill when the outline should be the primary visible shape.

<h2 class="text-fill-color:transparent text-stroke:1px|currentColor">    Outline</h2>

Split width and color when states differ

Use the dedicated width or color utilities when only one part changes across a state.

<h2 class="text-stroke:1px text-stroke:blue-60 text-stroke:transparent:hover">    Interactive outline</h2>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<h2 class="text-stroke:1px|blue-60:hover text-stroke:2px|blue-60@sm text-stroke:0@print">...</h2>