Issue with Custom Typography Variant in Tailwind v4 in _tw Theme

[vi-rgm]

Hello,

I’m currently working on a WordPress theme based on the _tw starter and have encountered an issue with the Tailwind Typography plugin when trying to define a custom variant (e.g., prose-custom-variant).

I’ve added a custom variant following the same structure as the default DEFAULT config, like this:

typography: (theme) => ({
  'custom-variant': {
    css: {
      '--tw-prose-body': theme('colors.foreground'),
      // ...
    },
  },
}),

However, when I apply prose prose-custom-variant classes on the front end, the styles don’t seem to apply.

My suspicion is either:

• The _tw build setup doesn’t register or merge the custom variant properly, or
• Something is overriding or preventing the variant from taking effect.

Could you please confirm:

• Does _tw support adding custom typography variants via tailwind-typography.config.js?
• If yes, is there a specific way to register these variants so they work with class names like prose-custom-variant?
• Or is this an intentional limitation related to how typography is loaded or scoped in the theme?

Theme Colors Source:

• I also wanted to understand where exactly the colors like theme('colors.foreground') come from. Does this value map directly to colors defined in the WordPress theme.json file, or are they sourced/overridden elsewhere in the _tw theme?

I tried adding the class prose prose-custom-variant dark:prose-invert prose-a:text-primary max-w-none but it still applies the default typography styles. I have verified the variant name matches, but it seems the styles for .prose-custom-variant are not present in the compiled CSS, which makes me think my custom typography config may not be loaded or merged correctly.

Thanks for your excellent work on _tw! I’d love to get this resolved and continue building with the theme.

Best regards,
Vi

[vi-rgm]

Also, I have noticed the below

• The inverted styles (dark mode) are applied correctly via dark:prose-invert (with my custom colors - prose-custom-variant).
• However, in light mode, it appears that the default Tailwind Typography styles are applied instead of the custom ones defined under prose-custom-variant.
• Is this fallback to default prose styles in light mode expected behavior?
• It seems the default plugin variant is overriding or taking precedence in light mode.

[gregsullivan]

Hello—Thanks for posting this!

I tested this feature with a freshly generated theme, and it worked as expected. Here is what I did:

• Generated a new theme called "Typography Theme Test"
• Updated tailwind-typography.config.js as follows:

'typography-theme-test': {
	css: {
		'--tw-prose-body': '#0C0',
		// ...
	}
}

• Updated functions.php with this:

define(
	'TYPOGRAPHY_THEME_TEST_TYPOGRAPHY_CLASSES',
	'prose prose-typography-theme-test max-w-none prose-a:text-primary'
);

• Ran npm run dev again

That resulted in this:

I also wanted to understand where exactly the colors like theme('colors.foreground') come from. Does this value map directly to colors defined in the WordPress theme.json file, or are they sourced/overridden elsewhere in the _tw theme?

All of the theme.json variables are added here:

_tw/tailwind/tailwind-theme.css

Lines 20 to 26 in de60a04

	--color-background: var(--wp--preset--color--background);
	--color-foreground: var(--wp--preset--color--foreground);
	--color-primary: var(--wp--preset--color--primary);
	--color-secondary: var(--wp--preset--color--secondary);
	--color-tertiary: var(--wp--preset--color--tertiary);
	--container-content: var(--wp--style--global--content-size);
	--container-wide: var(--wp--style--global--wide-size);

---

If you're able to share your repository, I could take a look! I'm not seeing any obvious issues with the screenshot you posted, or in your description of what you did, though. Happy to continue working on this with you if you're able to provide more details!

[vi-rgm]

Hi

Thanks so much for your quick response and for testing it on your end — that’s really helpful!

At the moment, we’re working on this project locally, so we don’t have a public repository we can share just yet. However, to assist with debugging, we’ll share the following files with you:

• tailwind-theme.css
• tailwind-typography.config.js
• theme.json

you can check this repo which contains the above files:- git repo

These should reflect exactly how our typography variant and color mappings are set up. Hopefully that gives more context and helps identify where things might be going wrong on our side — especially with the light mode styles not taking effect despite using prose prose-times-crypto.

this is our class, defined on function.php

define(
		'THEME_TYPOGRAPHY_CLASSES',
		'prose prose-custom-style-tc dark:prose-invert prose-a:text-primary max-w-none'
	);

We appreciate your support and will follow up shortly with the files.

Best regards,
Vi

[vi-rgm]

Hey @gregsullivan

We wanted to provide an update based on further testing:

We’ve noticed that when defining custom typography styles with hardcoded color values like:

'--tw-prose-body': '#747474',
'--tw-prose-headings': '#000000',
...

Everything works as expected — both light and dark modes apply the correct styles.

However, when we switch to using theme() references like:

'--tw-prose-body': theme('colors.text-two'),
'--tw-prose-headings': theme('colors.text-one'),
...

The styles no longer apply correctly. We’ve already defined these color keys (text-one, text-two, etc.) in our theme.json, and the corresponding CSS variables appear correctly in tailwind-theme.css.

If you could kindly review whether this is an issue with how the theme tokens (theme('colors.x')) are being resolved in this build setup, that would be super helpful.

FYI:- We generated the theme for development in the first week of May.

Thanks again for your support — we really appreciate how helpful and responsive you’ve been!

Best regards,
Vi

[gregsullivan]

Hello Vi,

I think your issue is that colors like these:

--color-background: var(--wp--preset--color--background);
--color-background-dark: var(--wp--preset--color--background-dark);

Create an object like this:

background: {
	DEFAULT: 'var(--wp--preset--color--background)',
	dark: 'var(--wp--preset--color--background-dark)',
}

So when you reference them here:

'--tw-prose-pre-code': theme('colors.background'),

You need to do so like this:

'--tw-prose-pre-code': theme('colors.background.DEFAULT'),

Please let me know if that works for you!

[gregsullivan]

I'm going to convert this as a discussion for now, but I'm happy to convert it back if there is an issue in _tw that requires a fix!