Typography
text-stroke-color
Setting the color of the stroke for text characters.
Overview
| Class | Declarations |
|---|---|
text-stroke-color:current | -webkit-text-stroke-color: currentColor;
|
text-stroke-color:transparent | -webkit-text-stroke-color: transparent;
|
text-stroke-color:<color> | -webkit-text-stroke-color: <color>;
|
Examples
Set text stroke color
Use text-stroke:* with a color value to control only the stroke color.
<h2 class="text-stroke:1px text-stroke:blue-60"> Stroke color</h2>Generated CSS
@layer theme { :root { --color-blue-60: oklch(51.83% .2687 266.1) }}@layer utilities { .text-stroke\:blue-60 { -webkit-text-stroke-color: var(--color-blue-60) }}Use the current color
Use text-stroke:current when the stroke should follow the foreground color.
<h2 class="fg:blue-60 text-stroke:1px text-stroke:current"> Current stroke</h2>Make the stroke transparent
Use text-stroke:transparent to hide the stroke without changing width.
<h2 class="text-stroke:1px text-stroke:transparent"> No visible stroke</h2>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<h2 class="text-stroke:blue-60:hover text-stroke:transparent@print text-stroke:current@sm">...</h2>