utilities/color

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

text-color utility classes and values

The text color utility in Tailwind v4 includes these classes: text-inherit (color: inherit), text-current (color: currentColor), text-transparent (color: transparent). Named colors use the pattern text-{name} which generates color: var(--color-{name}). Custom properties can be used with text-(<custom-property>) generating color: var(<custom-property>). Arbitrary values are supported with text-[<value>] generating color: <value>.

text color opacity modifier syntax

Text color opacity can be controlled using the slash modifier syntax: text-{color}/{opacity}. Examples include text-blue-600/100, text-blue-600/75, text-blue-600/50, and text-blue-600/25 for controlling opacity at 100%, 75%, 50%, and 25% respectively.

text color state variant example

Text color can be applied on hover using variants like hover:text-blue-600. Dark mode variants can be combined with state variants, for example dark:hover:text-blue-400.

text color responsive design

Text color utilities support responsive design using breakpoint prefixes. For example, you can use different text colors at different screen sizes by applying responsive variants to the text utility.

text color uses CSS custom properties in v4

In Tailwind CSS v4, named text colors generate CSS custom properties using the pattern color: var(--color-{name}) rather than hard-coded color values, allowing for dynamic theme customization.

Color utilities available

The entire color palette is available across all color-related utilities. Available utilities include: bg-* (background color), text-* (text color), decoration-* (text decoration color), border-* (border color), outline-* (outline color), shadow-* (box shadow color), inset-shadow-* (inset box shadow color), ring-* (ring shadow color), inset-ring-* (inset ring shadow color), accent-* (accent color), caret-* (caret color), scrollbar-thumb-* (scrollbar thumb color), scrollbar-track-* (scrollbar track color), fill-* (SVG fill color), and stroke-* (SVG stroke color).

Adjusting color opacity syntax

You can adjust the opacity of a color using syntax like bg-black/75, where 75 sets the alpha channel to 75%. This syntax also supports arbitrary values like bg-pink-500/[71.37%] and CSS variable shorthand like bg-cyan-400/(--my-alpha-value).

Dark mode color variants

Use the dark variant to write classes like dark:bg-gray-800 that only apply a color when dark mode is active.

Give your agent this brain