Add prose-body and prose-invert-* classes for typography plugin

[Soviut]

Being able to override prose defaults with classes has been really useful.

prose prose-neutral prose-headings:text-base prose-h1:text-3xl

However, some of the elements that have CSS variables do not seem to have class equivalents. Most importantly, the body text that several elements derive their colour from is normally a very subtle gray.

I was hoping I could do the following to make it pure black.

prose prose-neutral prose-body:black

But instead I wound up having to change the global tailwind config for the neutral grayscale.

{
  typography: (theme) => ({
    neutral: {
      css: {
        "--tw-prose-body": theme("colors.black"),
      },
    },
  });
}

Additionally, the invert variations are not exposed either so I could not do the following.

prose prose-neutral prose-body:black prose-invert-body:white

Instead I needed to change the global config again.

{
  typography: (theme) => ({
    neutral: {
      css: {
        "--tw-prose-body": theme("colors.black"),
        "--tw-prose-invert-body": theme("colors.white"),
      },
    },
  });
}

[wongjn]

You could use a text-<color> class:

<div class="prose prose-neutral text-black">

And when inverting:

<div class="prose prose-neutral prose-invert text-white">

[Soviut]

I tried that but ran into, what I think, were issues of specificity. I'll try again to make sure it wasn't a fluke.

That said, it would still make sense to be able to specify the override since you may not want to target all text, only the body text.