TW Config Custom Variations Not Working on Pages

[sameasterling]

I am setting custom values for --tw-prose-headings and --tw-prose-links in the typography config for the WP theme. They are working in the WP editor and in posts on the frontend but they are not working on pages on the frontend. If I edit them under DEFAULT CSS they work in posts and pages. Anybody else experiencing this?

Thanks!

[gregsullivan]

Hi Sam—Thanks for posting this!

I'm just trying to wrap my head around exactly what's happening. Is the baseline that Tailwind Typography works everywhere, but the modifications in tailwind-typography.config.js don't work on pages, while working everywhere else?

[sameasterling]

That is correct. The modifications under theme don’t work on pages, if you add them under the default css they do work on pages. On Jul 31, 2025, at 3:51 PM, Greg Sullivan ***@***.***> wrote: Hi Sam—Thanks for posting this! I'm just trying to wrap my head around exactly what's happening. Is the baseline that Tailwind Typography works everywhere, but the modifications in tailwind-typography.config.js don't work on pages, while working everywhere else? —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>

[gregsullivan]

Are you using a different font size for pages versus posts? I'm wondering whether you changed the variables in one context, but they're being overridden.

I'd generally change the variables within this block:

_tw/tailwind/tailwind-typography.config.js

Lines 111 to 176 in 320d863

	_tw: {
	css: {
	'--tw-prose-body': theme('colors.foreground'),
	'--tw-prose-headings': theme('colors.foreground'),
	'--tw-prose-lead': theme('colors.foreground'),
	'--tw-prose-links': theme('colors.primary'),
	'--tw-prose-bold': theme('colors.foreground'),
	'--tw-prose-counters': theme('colors.primary'),
	'--tw-prose-bullets': theme('colors.primary'),
	'--tw-prose-hr': theme('colors.foreground'),
	'--tw-prose-quotes': theme('colors.foreground'),
	'--tw-prose-quote-borders': theme('colors.primary'),
	'--tw-prose-captions': theme('colors.foreground'),
	'--tw-prose-kbd': theme('colors.foreground'),
	/**
	* Since the theme colors use CSS variables, you'll
	* need to update the hex color below and then
	* uncomment:
	*/
	// '--tw-prose-kbd-shadows': hexToRgb(
	// '#123456'
	// ),
	'--tw-prose-code': theme('colors.foreground'),
	'--tw-prose-pre-code': theme('colors.background'),
	'--tw-prose-pre-bg': theme('colors.foreground'),
	'--tw-prose-th-borders': theme('colors.foreground'),
	'--tw-prose-td-borders': theme('colors.foreground'),
	'--tw-prose-invert-body': theme('colors.background'),
	'--tw-prose-invert-headings':
	theme('colors.background'),
	'--tw-prose-invert-lead': theme('colors.background'),
	'--tw-prose-invert-links': theme('colors.primary'),
	'--tw-prose-invert-bold': theme('colors.background'),
	'--tw-prose-invert-counters': theme('colors.primary'),
	'--tw-prose-invert-bullets': theme('colors.primary'),
	'--tw-prose-invert-hr': theme('colors.background'),
	'--tw-prose-invert-quotes': theme('colors.background'),
	'--tw-prose-invert-quote-borders':
	theme('colors.primary'),
	'--tw-prose-invert-captions':
	theme('colors.background'),
	'--tw-prose-invert-kbd': theme('colors.background'),
	'--tw-prose-invert-kbd-shadows': hexToRgb(
	theme('colors.background')
	),
	'--tw-prose-invert-code': theme('colors.foreground'),
	'--tw-prose-invert-pre-code':
	theme('colors.background'),
	/**
	* Since the theme colors use CSS variables, you'll
	* need to update the hex color below and then
	* uncomment:
	*/
	// '--tw-prose-invert-pre-bg': hexToRgb(
	// '#123456'
	// ),
	'--tw-prose-invert-th-borders':
	theme('colors.background'),
	'--tw-prose-invert-td-borders':
	theme('colors.background'),
	},
	},

[sameasterling]

User error. I'm creating custom pages, for example page-mypage.php and I'm not wrapping the content with:
<?php theme_content_class( 'page-content' ); ?>
Sorry for wasting your time.

[gregsullivan]

No problem at all—happy to hear you were able to sort it out!

[sameasterling]

I'm still wrapping my head around this but .page-content & .entry-content seems to get a little messy when you are using layout in theme.json and/or creating pages where content doesn't come from the editor.

If I'm styling links with a hover state, for example, my solution now is to include the css inside tw-typography config for the default css and for the theme. Any thoughts?

[gregsullivan]

Do you mean the link hover state varies from page to page?

The intent is for there to be a single Tailwind Typography style for the entire site. If you need to override it in certain areas, I would likely do it with classes in the element wrapping the Tailwind Typography container.

If you don't want the .entry-content or .page-content wrappers, you don't need to use them. Looking at this:

https://github.com/gregsullivan/_tw/blob/320d863a6f4d6757ce330b802c0c59bd0216b130/theme/template-parts/content/content-page.php#L26C1-L37C31

You could change _tw_content_class( 'entry-content' ) to _tw_content_class() and remove the entry-content wrapper entirely. Then these would not apply:

https://github.com/gregsullivan/_tw/blob/320d863a6f4d6757ce330b802c0c59bd0216b130/tailwind/custom/components/components.css#L35C1-L56C2

You could also add classes overriding things like the width, etc.