Typography
text-fill-color
Setting the color of text.
Overview
| Class | Declarations |
|---|---|
text-fill-color:currentColor | -webkit-text-fill-color: currentColor;
|
text-fill-color:transparent | -webkit-text-fill-color: transparent;
|
text-fill-color:<color> | -webkit-text-fill-color: <color>;
|
Examples
Fill text with a color
Use text-fill-color:* to set the WebKit text fill color directly.
<span class="text-fill-color:blue-60"> Filled text</span>Generated CSS
@layer theme { :root { --color-blue-60: oklch(51.83% .2687 266.1) }}@layer utilities { .text-fill-color\:blue-60 { -webkit-text-fill-color: var(--color-blue-60) }}Make text fill transparent
Use text-fill-color:transparent when the visible text should come from a background clip, stroke, or layered effect.
<h2 class="background-clip:text text-fill-color:transparent"> Gradient title</h2>Use the current color
Use text-fill-color:currentColor when the fill should follow color.
<span class="fg:blue-60 text-fill-color:currentColor">Current color</span>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<span class="text-fill-color:blue-60:hover text-fill-color:currentColor@print text-fill-color:currentColor@sm">...</span>