[v4] How to "uncolour" typography plugin in CSS?

[radiosilence]

In TW3 I had to awkwardly iterate over the various vars in typography to stop it deciding to colour my prose so it inherited from the rest of the website like this:

const proseVars = [
  "--tw-prose-body",
  "--tw-prose-headings",
  "--tw-prose-lead",
  "--tw-prose-bold",
  "--tw-prose-counters",
  "--tw-prose-bullets",
  "--tw-prose-hr",
  "--tw-prose-quotes",
  "--tw-prose-quote-borders",
  "--tw-prose-captions",
  "--tw-prose-code",
  "--tw-prose-pre-code",
  "--tw-prose-pre-bg",
  "--tw-prose-th-borders",
  "--tw-prose-td-borders",
];


export default {
      //...
      typography: ({ theme }) => ({
        DEFAULT: {
          css: {
            "--tw-prose-links": theme("colors.brand.DEFAULT"),
            ...proseVars.reduce((acc, key) => ({ ...acc, [key]: "inherit" }), {}),
          },
        },
      }),
    },
  },
  plugins: [typography],
} satisfies Config;

Which was non-ideal, but it did at least work.

I am trying to do this in TW4 which would logically be:

@theme {
  /*...*/
  --tw-prose-body: inherit;
  --tw-prose-headings: inherit;
  --tw-prose-lead: inherit;
  --tw-prose-bold: inherit;
  --tw-prose-counters: inherit;
  --tw-prose-bullets: inherit;
  --tw-prose-hr: inherit;
  --tw-prose-quotes: inherit;
  --tw-prose-quote-borders: inherit;
  --tw-prose-captions: inherit;
  --tw-prose-code: inherit;
  --tw-prose-pre-code: inherit;
  --tw-prose-pre-bg: inherit;
  --tw-prose-th-borders: inherit;
  --tw-prose-td-borders: inherit;
}

However this does nothing. Is there a way to strip tailwind typography of its colouring?

[radiosilence]

Here's a sort of answer, it's also a little unwieldy but I got rid of the config/css and went with this:

 
<article
  class={cx(
    "prose",
    "prose-sm",
    "max-w-screen-lg",
    "prose-h1:text-inherit",
    "prose-h2:text-inherit",
    "prose-h3:text-sm",
    "prose-body:text-inherit",
    "prose-strong:text-inherit",
    "prose-h2:text-inherit",
    "prose-h3:text-inherit",
    "prose-h4:text-inherit",
    "prose-code:text-inherit",
    "prose-quotes:text-inherit",
    "text-inherit",
    cls,
  )}
  {...rest}>
  <slot />
</article>

It would be nice if there was a prose theme that did this though, I couldn't see one in the docs. I've done a PR on the lib to add an inherit theme, dunno if anyone will want it.

[radiosilence]

Ok having looked into the generated CSS, it seems like this is more idiomatic:

@layer utilities {
  .prose {
    color: inherit;
    --tw-prose-body: inherit;
    --tw-prose-headings: inherit;
    --tw-prose-lead: inherit;
    --tw-prose-links: inherit;
    --tw-prose-bold: inherit;
    --tw-prose-counters: inherit;
    --tw-prose-bullets: inherit;
    --tw-prose-hr: inherit;
    --tw-prose-quotes: inherit;
    --tw-prose-quote-borders: inherit;
    --tw-prose-captions: inherit;
    --tw-prose-kbd: inherit;
    --tw-prose-kbd-shadows: inherit;
    --tw-prose-code: inherit;
    --tw-prose-pre-code: inherit;
    --tw-prose-pre-bg: inherit;
    --tw-prose-th-borders: inherit;
    --tw-prose-td-borders: inherit;
    --tw-prose-invert-body: inherit;
    --tw-prose-invert-headings: inherit;
    --tw-prose-invert-lead: inherit;
    --tw-prose-invert-links: inherit;
    --tw-prose-invert-bold: inherit;
    --tw-prose-invert-counters: inherit;
    --tw-prose-invert-bullets: inherit;
    --tw-prose-invert-hr: inherit;
    --tw-prose-invert-quotes: inherit;
    --tw-prose-invert-quote-borders: inherit;
    --tw-prose-invert-captions: inherit;
    --tw-prose-invert-kbd: inherit;
    --tw-prose-invert-kbd-shadows: inherit;
    --tw-prose-invert-code: inherit;
    --tw-prose-invert-pre-code: inherit;
    --tw-prose-invert-pre-bg: inherit;
    --tw-prose-invert-th-borders: inherit;
    --tw-prose-invert-td-borders: inherit;
  }
}