Overriding Typography styles

[Tholkappiar]

I am using next + ts with tailwind css and typography !

so i tried to over ride some styles for pre tag but it doesn't make any change, tried several things but not worked expected !
Any help is appreciated, Thank you !

tailwind.config.ts :

import type { Config } from "tailwindcss";

const config: Config = {
    content: [
        "./pages/**/*.{js,ts,jsx,tsx,mdx}",
        "./components/**/*.{js,ts,jsx,tsx,mdx}",
        "./app/**/*.{js,ts,jsx,tsx,mdx}",
    ],
    darkMode: 'class', // Enable dark mode
    theme: {
        extend: {
            typography: ({ theme }) => ({
                // Base prose styles
                DEFAULT: {
                    css: {
                        pre: {
                            backgroundColor: theme('colors.gray.100'),
                        },
                    },
                },
                // Dark mode prose styles
                invert: {
                    css: {
                        pre: {
                            backgroundColor: theme('colors.red.600'), 
                        },
                    },
                },
            }),
        },
    },
    plugins: [
        require('@tailwindcss/typography'),
    ],
};

export default config;

[wongjn]

Are you using Tailwind v3? Consider providing a git repo that reproduces the issue and we can take a look for you.

[Tholkappiar]

Hey @wongjn Thanks for the reply !

I am using tailwind v4 ! and here is the repo link : https://github.com/Tholkappiar/Tholkappiar.github.io

[wongjn]

As per the README, you're missing the @config line to point to your tailwind.config.ts file:

 @import "tailwindcss";
 @import "tw-animate-css";
 @plugin "@tailwindcss/typography";
+@config "../../tailwind.config.ts";

 @theme {

[Tholkappiar]

I read everything... except the useful part 🙂 Thanks @wongjn

PS: you can close this discussion