color

Examples

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-[<value>] syntax to set the text color based on a completely custom value:

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

For CSS variables, you can also use the text-(<custom-property>) syntax:

<p class="text-(--my-color) ...">  <!-- ... --></p>

This is just a shorthand for text-[var(<custom-property>)] that adds the var() function for you automatically.

Applying on hover

Prefix a color utility with a variant like hover:* to only apply the utility in that state:

<p class="...">  Oh I gotta get on that  <a class="underline hover:text-blue-600 dark:hover:text-blue-400" href="https://en.wikipedia.org/wiki/Internet">internet</a>,  I'm late on everything!</p>

Learn more about using variants in the variants documentation.

Responsive design

Prefix a color utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<p class="text-blue-600 md:text-green-600 ...">  <!-- ... --></p>

Learn more about using variants in the variants documentation.

Customizing your theme

Use the --color-* theme variables to customize the color utilities in your project:

@theme {  --color-regal-blue: #243c5a; }

Now the text-regal-blue utility can be used in your markup:

<p class="text-regal-blue">  <!-- ... --></p>

Learn more about customizing your theme in the theme documentation.