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:0@print text-stroke:2px|blue-60@sm">...</h2>