text color

Utilities for controlling the text color of an element.

2025-03-28

Written by: tdtc

intensity

see colors

Basic example

Use utilities like text-blue-600 and text-sky-400 to control the text color of an element:

<p class="text-blue-600 dark:text-sky-400">The quick brown fox...</p>

Changing the opacity

Use the color opacity modifier to control the text color opacity of an element:

<p class="text-blue-600/100 dark:text-sky-400/100">The quick brown fox...</p>
<p class="text-blue-600/75 dark:text-sky-400/75">The quick brown fox...</p>
<p class="text-blue-600/50 dark:text-sky-400/50">The quick brown fox...</p>
<p class="text-blue-600/25 dark:text-sky-400/25">The quick brown fox...</p>

Using a custom value

Use the text-[] syntax to set the text color based on a completely custom value:

<p class="text-[#50d71e] ...">
  <!-- ... -->
</p>

Ref

• text color
• Responsive design