In tailwind 4 you only need to do the following. Install the plugin

npm install -D @tailwindcss/typography

enable it in global.css (assuming you are using default next configuration withapp router):

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

Github issue dicussing this

As per the documentation, you can add the extra options as extra CSS variables seperated by two hyphens --:

<script src="https://unpkg.com/@tailwindcss/[email protected]"></script>

<style type="text/tailwindcss">
@theme {
  --text-heading-banner-title: 88px;
  --text-heading-banner-title--line-height: 100px;
  --text-heading-banner-title--font-weight: 700;
}
</style>

<div class="text-heading-banner-title">
  Hello world
</div>

As per the readme for the typography plugin, you shouldn't need to modify the configuration:

Overriding max-width

Each size modifier comes with a baked in max-width designed to keep the content as readable as possible. This isn't always what you want though, and sometimes you'll want the content to just fill the width of its container.

In those cases, all you need to do is add max-w-none to your content to override the embedded max-width:

<div class="grid grid-cols-4">
  <div class="col-span-1">
    <!-- ... -->
  </div>
  <div class="col-span-3">
    <article class="prose max-w-none">{{ markdown }}</article>
  </div>
</div>

Otherwise, if you still want to override the max width for all prose instances. You can do that via JavaScript configuration. As per the readme, configuration is done via a tailwind.config.js file:

Adding custom color themes

To customize the color theme beyond simple CSS overrides, you can use the JavaScript based theme API. To do that, use the @config directive:

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

You can then create your own color theme by adding a new tailwind.config.js file with the typography section and providing your colors under the css key:

[…]

Customizing the CSS

If you want to customize the raw CSS generated by this plugin, first follow the steps from adding custom color themes to set up a JavaScript based configuration API and then add your overrides under the typography key in the theme section of your tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            color: '#333',
            a: {
              color: '#3182ce',
              '&:hover': {
                color: '#2c5282',
              },
            },
          },
        },
      },
    },
  },
}

So you could do something like:

@import "tailwindcss";
@plugin "@tailwindcss/typography";
@config "./tailwind.config.js"; /* Path to `tailwind.config.js` file relative to this CSS file. */

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

and css as .font-oswald{font-\*\*:oswald\*\*} of course also as a variable if/when necessary or you are trying to go Design System way ?