docs: update for Tailwind 4

[benmccann]

What version of @tailwindcss/typography are you using?

4.0.0

What version of Node.js are you using?

22.11.0

What browser are you using?

Chrome

What operating system are you using?

Linux

Reproduction repository

https://github.com/tailwindlabs/tailwindcss-typography

Describe your issue

The readme here says Then add the plugin to your tailwind.config.js file, but running pnpx @tailwindcss/upgrade@next as instructed in https://tailwindcss.com/docs/upgrade-guide#using-the-upgrade-tool removed my tailwind.config.js file. The upgrade guide doesn't make any mention of plugins. The readme here doesn't specify if this plugin works with Tailwind 3 and/or 4

The docs for the other plugins such as forms and container queries need to be updated as well

[gene-git]

This is what I used in src/app/globals.css

@plugin "@tailwindcss/typography";

WARNING
However tailwindcss docs describes this as for 'legacy' only - which implies that this module ( typgraphy) is now legacy/deprecated - so what is the recommendation for migrating off typography?

It is possible this can work using @import may work instead of @plugin but I have not tried yet.

See tw docs

[nickjj]

@gene-git thank you for that. It also works with @plugin "@tailwindcss/forms";, although it does not work with @tailwindcss/postcss as it seems to not have any effect. PostCSS paths fail to be resolved.

It is possible this can work using import instead of plugin but I have not tried yet.

Using @import instead of @plugin fails with Error: Can't resolve '@tailwindcss/typography' in <INSERT YOUR PATH HERE>.

[brennanangel]

It may also be helpful to include some details on customizing since the docs talk all about using the JS config file instead of theme. For example, what's the best way to set the colors to Slate or Zinc?

[craigrileyuk]

There's zero information I can find for plugin developers about how to support v4.

It feels like they were in such a hurry to release it, that pretty simple questions never got answered.

[58bits]

Also wondering why there is no mention of typography and other plugsins here or in the upgrade guide.

[stijns96]

I always renamed it to rte, since Shopify is using this as well. Anyone here that knows how to do this with TW 4?

[58bits]

Hopefully they'll offer a CSS stylesheet with the correct utility class definitions.

You can also generate a style sheet via postcss manually - but it won't have the utility class settings via @utility directive.

A bit like @victorelgersma has done here... https://github.com/victorelgersma/tailwind-typography-stylesheet (although prose and other classnames are defined in this stylesheet).

[KorigamiK]

I can also see some mention of typography but I'm not sure if this is how we configure the styles in tailwind typography:

https://tailwindcss.com/docs/theme#with-custom-css