How to enable light theme?

[vitonsky]

I use latest version of https://github.com/tailwindlabs/tailwindcss-typography

And this is how my html looks like right now:

I want to change style to light version. How to do it?

I've tried to add next config, as described in docs, but it does not work:

/** @type {import('tailwindcss').Config} */
module.exports = {
	theme: {
		extend: {
			typography: () => ({
				pink: {
					css: {
						'--tw-prose-pre-bg': 'var(--chakra-colors-bg-muted)',
						'--tw-prose-pre-code': 'var(--chakra-colors-fg-muted)',
					},
				},
			}),
		},
	},
};

I've added @config "./tailwind.config.js"; directive, CSS variables with prefix --chakra is defined, global styles file is included on page, but it does not work for me. Class i use on root element is

prose
  prose-h1:font-bold prose-h1:text-xl
  prose-a:text-blue-600 prose-p:text-justify prose-img:rounded-xl
  prose-headings:underline max-w-full

What i missed?

[rohanbyale]

You have two options:

Option 1: Override the default prose theme

If you want all prose elements to use your colors, configure DEFAULT instead of pink:
// tailwind.config.js
module.exports = {
theme: {
extend: {
typography: {
DEFAULT: {
css: {
'--tw-prose-pre-bg': 'var(--chakra-colors-bg-muted)',
'--tw-prose-pre-code': 'var(--chakra-colors-fg-muted)',
},
},
},
},
},
};

Option 2: Use your custom theme

If you keep:
typography: {
pink: {
css: {
...
}
}
}

then you must use:
HTML

...

instead of just:
HTML

If it still doesn't work Check these: Restart your dev server after editing tailwind.config.js. Make sure @plugin "@tailwindcss/typography"; is loaded (Tailwind CSS v4) or the plugin is registered (v3). Verify the CSS variables (--chakra-colors-bg-muted, etc.) actually exist in DevTools. Inspect the generated CSS to see whether --tw-prose-pre-bg is being overridden by another rule. From your screenshot, it looks like you're using Tailwind CSS Typography v4. If so, could you also share: your tailwind.config.js, your main CSS file (where you import Tailwind/plugins)