How to add custom typography in nextjs project

[Peeyushmohapatra]

I was trying to add custom typography but not getting proper resources to do. I went through the docs but not getting clear solution. I just upgraded tailwind css form v3 to v4.

In tailwind V3 we used to write typography like this in tailwind.config file:-

module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            "--tw-prose-body": "hsl(var(--muted-foreground))", 
            "--tw-prose-headings": "hsl(var(--foreground))", 
            "--tw-prose-links": "hsl(var(--primary))",  
            "--tw-prose-code": "hsl(var(--code-text))",  
            "--tw-prose-pre-bg": "hsl(var(--code-background))",
          },
        },
      },
    },
  },
  plugins: [require('@tailwindcss/typography')],
}

But there is no reference for how to write the the above one in tailwind v4

[philipp-spiess]

@Peeyushmohapatra Hey! The readme of the typography project is updated to show how the v4 integration works: https://github.com/tailwindlabs/tailwindcss-typography 👍

[Peeyushmohapatra]

@philipp-spiess I have already upgraded to tailwind v4.

Created a tailwind.config.ts file where i added this code

import type { Config } from "tailwindcss";
module.exports = {
  theme: {
    extend: {
      typography: {
        blog: {
          css: {
           "--tw-prose-th-borders": "var(--border)",
	   "--tw-prose-td-borders": "var(--border)",
	   "--tw-prose-headings": "var(--primary-foreground)",
	   "--tw-prose-bold": "var(--primary-foreground)",
	table: {
		maxWidth: "770px",
		overflowX: "auto",
		display: "block",
		whiteSpace: "nowrap",
		marginTop: "0",
		marginBottom: "0",
		tableLayout: "auto",
		borderCollapse: "collapse",
		},
		th: {
		padding: "0.625rem",
		border: "0.031rem solid",
		},
		td: {
		padding: "0.625rem",
		border: "0.031rem solid",
		},
          },
        },
      },
    },
  },
  plugins: [require('@tailwindcss/typography')],
}

Added plugin in global.css file i.e.,

@plugin "@tailwindcss/typography" {
	className: "custom-typography"
}

Still the issue persist. class name custom-typography-blog is not getting suggested and working.

[philipp-spiess]

@Peeyushmohapatra If you create a config file you have to use @config "../../path/to/tailwind.config.ts" to load it. Also you do not need to specificy the plugin in the tailwind.config.ts file if you also use @plugin to load it 👍
If this still doesn't work please send us a repro so we can take a look!