dynamic colors?

[ldobrovic]

Is it possible for text styled with prose to use color set dynamically?

I have a color picker which allows a user to set a color, which I'm able to reflect in other components simply by setting style={{color: ${dynamicColor}}}, but can't seem to get it to work properly with tailwind typography.

Strangely, I am able to get dynamic font families to work, e.g. className={font-${fontFamily}} carries over just fine to typography.

I'm also not able to set a default typography font color other than the default slate/neutral via

	typograhy : {
		DEFULT : {
			css : { 
				color: `#FF0000`
			}
		}
	},

[wongjn]

You could consider setting colors dynamically using the CSS variables that typography uses:

<div
  className="prose"
  style={{
    --tw-prose-body: dynamicColor,
  }}
>

[rozsazoltan]

Related: How to configure @tailwindcss/typography plugin from TailwindCSS v4

@utility prose-pink {
  @apply prose;
  & > * {
    --tw-prose-body: var(--color-pink-800);
    --tw-prose-headings: var(--color-pink-900);
  }
}

• https://play.tailwindcss.com/T82BHgYuUp?file=css

[rozsazoltan]

The font-${fontFamily} syntax is incorrect. You need to understand how Tailwind CSS works to see why: Tailwind CSS does not run at runtime; instead, it analyzes the content of your source files. So if you request a font-${fontFamily} class, Tailwind CSS reads it literally and has no way of knowing what you mean.

Specifically, only CSS variables can achieve this kind of "dynamic" behavior, because the variable name is fixed and never changes: font-[var(--fontFamily)] or, from v4 onward, shorthand font-(--fontFamily). You can then pass the current value from JS to CSS via the style attribute.

<div class="font-(--fontFamily)" style={{ "--fontFamily": $fontFamily }} >Hello World</div>

See more:

• https://tailwindcss.com/docs/detecting-classes-in-source-files#dynamic-class-names
• How to build dynamically class names with Tailwind CSS

More example:

• How to use Tailwind with Vue dynamic class names
• Or use pre-declared enums
• Exclude a class being tree-shaken by Tailwind

[rozsazoltan]

Related: How do you reference dynamic classes/utilities using a JS variable and pass them through in the class attribute inline in HTML?