Update (configure without tailwind.config.js)

I just based it on an answer written by someone else. I quickly put together a v4 reproduction in the Play environment without a config file by new @utility directive:

• Tailwind Play Reproduction

@import "tailwindcss";
@plugin "@tailwindcss/typography";

@utility prose-pink {
  @apply prose;
  & > * {
    --tw-prose-body: var(--color-pink-800);
    --tw-prose-headings: var(--color-pink-900);
  }
}

With this, I produce exactly the same result that the documentation recommends using a config file for:

• Adding custom color theme for Typography

Plugin

Starting from TailwindCSS v4, a CSS-first configuration approach is preferred. Therefore, all plugins should be integrated with TailwindCSS using the @plugin directive. Following the Typography documentation:

• New CSS-first configuration option in v4 - StackOverflow
• @plugin directive - TailwindCSS v4 Docs
• Typography Installation - GitHub Readme

npm install -D @tailwindcss/typography

@import "tailwindcss";
@plugin "@tailwindcss/typography";

Configuration

In CSS-first mode, you have the option to change the default prose class name when declaring the plugin:

@import "tailwindcss";
@plugin "@tailwindcss/typography" {
  className: wysiwyg; /* changed from prose to wysiwyg */
}

In TailwindCSS v3, however, the legacy JavaScript-based configuration (tailwind.config.js) allowed for custom configuration as well.

You can still do this using the @config directive.

• @config directive - TailwindCSS v4 Docs
• Adding custom color themes to Typography - GitHub Readme
• Customizing the CSS to Typography - GitHub Readme

@import "tailwindcss";
@plugin "@tailwindcss/typography";
@config "./relative/path/to/tailwind.config.js";

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      typography: () => ({
        // ...
      }),
    },
  },
}

Contrary to the documentation, by completely omitting the JavaScript-based configuration, you still have the option to customize the prose utility like this:

• Typography upgrade to TailwindCSS v4 - @ErwannRousseau's code snippet - GitHub

@import "tailwindcss";
@plugin "@tailwindcss/typography";

@utility prose {
  --tw-prose-body: var(--color-primary);
  --tw-prose-headings: var(--color-primary);
  --tw-prose-bold: var(--color-primary);
  --tw-prose-quote-borders: var(--color-slate-300);
  --tw-prose-quotes: var(--color-muted-foreground);
  --tw-prose-code: var(--color-primary);

  code {
    &::before,
    &::after {
      display: none;
    }
    text-wrap: nowrap;
  }

  blockquote {
    font-weight: 400;
  }
}