Typography
Text Color
Utilities for controlling the text color of an element.
Basic usage
Setting the text color
Control the text color of an element using the text-{color} utilities.
The quick brown fox jumps over the lazy dog.
<p className="**text-blue-600**" dark-className="**text-sky-400**">The quick brown fox...</p>
Changing the opacity
Control the opacity of an element's text color using the color opacity modifier.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<p className="text-blue-600**/100**" dark-className="text-sky-400**/100**">The quick brown fox...</p>
<p className="text-blue-600**/75**" dark-className="text-sky-400**/75**">The quick brown fox...</p>
<p className="text-blue-600**/50**" dark-className="text-sky-400**/50**">The quick brown fox...</p>
<p className="text-blue-600**/25**" dark-className="text-sky-400**/25**">The quick brown fox...</p>
<p className="text-blue-600**/0**" dark-className="text-sky-400**/0**">The quick brown fox...</p>
You can use any value defined in your opacity scale, or use arbitrary values if you need to deviate from your design tokens.
<p className="text-blue-600**/[.06]**">The quick brown fox...</p>