Tailwind v4 plugin configuration: how to override 65ch max-width in Tailwind CSS Typography

I am facing the exact same issue as the one described in Override 65ch max-width in Tailwind CSS Typography, only in the recently published v4 of Tailwind CSS.

This new version has fully changed the configuration and, in particular, the plugin configurations, so I am a bit lost in all this process.

In Tailwind v3, I had this configuration in my tailwind.config.ts file:

const config = {
// ...
    extend: {
      typography: {
        DEFAULT: {
          css: {
            maxWidth: '100%',
          }
        }
      },
//...
  plugins: [
    require('@tailwindcss/typography'),
  ],
//...

However, the tailwind.config.ts file has been fully removed in Tailwind v4. If I understand the docs correctly, plugins are now setup directly in your main.css file with @plugin '@tailwindcss/typography';. But where does one configure things such as the one I am trying to do?

Any help is appreciated, thank you!

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',
          },
        },
      },
    },
  },
}