[v4] Extend plugin (e.g. typography) config in CSS config file

[yy4382]

For example, I have the following tailwind config in v3:

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

In v4, is it possible to extend/overwrite typography's styles application wide like the above configuration in the CSS config file?

[yy4382]

Maybe I overthought the situation; I found that I just need to directly set the CSS for .prose.
But this feel like "overwriting" the default style, not configuring the plugin. Is there any better practice?
And, is it still possible to configure default class name in v4?

[JulioGrajales]

Currently with the css v4 @plugin syntax the only way to customize the default class name of the typography plugin is to re-export the plugin in a separate .js file and importing your plugin in the css file:

// my-plugin.js
import typographyPlugin from '@tailwindcss/typography';

export default typographyPlugin({
  className: 'wysiwyg'
})

/* main.css */
@import "tailwindcss";

@plugin "./my-plugin.js";

Not sure if the full v4 release will support passing options to plugins directly in the css file but currently this is how it can be done.