Port v3 tailwindcss-typography custom color themes to v4 (with no tailwind.config.ts)

[spacecat]

From the docs:

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:

/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
typography: () => ({
pink: {
css: {
'--tw-prose-body': 'var(--color-pink-800)',
'--tw-prose-headings': 'var(--color-pink-900)',
'--tw-prose-lead': 'var(--color-pink-700)',
'--tw-prose-links': 'var(--color-pink-900)',
'--tw-prose-bold': 'var(--color-pink-900)',
'--tw-prose-counters': 'var(--color-pink-600)',
'--tw-prose-bullets': 'var(--color-pink-400)',
'--tw-prose-hr': 'var(--color-pink-300)',
'--tw-prose-quotes': 'var(--color-pink-900)',
'--tw-prose-quote-borders': 'var(--color-pink-300)',
'--tw-prose-captions': 'var(--color-pink-700)',
'--tw-prose-code': 'var(--color-pink-900)',
'--tw-prose-pre-code': 'var(--color-pink-100)',
'--tw-prose-pre-bg': 'var(--color-pink-900)',
'--tw-prose-th-borders': 'var(--color-pink-300)',
'--tw-prose-td-borders': 'var(--color-pink-200)',
'--tw-prose-invert-body': 'var(--color-pink-200)',
'--tw-prose-invert-headings': 'var(--color-white)',
'--tw-prose-invert-lead': 'var(--color-pink-300)',
'--tw-prose-invert-links': 'var(--color-white)',
'--tw-prose-invert-bold': 'var(--color-white)',
'--tw-prose-invert-counters': 'var(--color-pink-400)',
'--tw-prose-invert-bullets': 'var(--color-pink-600)',
'--tw-prose-invert-hr': 'var(--color-pink-700)',
'--tw-prose-invert-quotes': 'var(--color-pink-100)',
'--tw-prose-invert-quote-borders': 'var(--color-pink-700)',
'--tw-prose-invert-captions': 'var(--color-pink-400)',
'--tw-prose-invert-code': 'var(--color-white)',
'--tw-prose-invert-pre-code': 'var(--color-pink-300)',
'--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
'--tw-prose-invert-th-borders': 'var(--color-pink-600)',
'--tw-prose-invert-td-borders': 'var(--color-pink-700)',
},
},
}),
},
},
}
See our internal style definitions for some more examples.

END OF OFFICIAL DOCS

I'm migrating from v3 to v4 and I've gotten rid of all of the stuff in my tailwind.config.ts except for custom color themes stuff in tailwind typography pluing.

I would like to see a solution where no tailwind.config.ts is used. E.g. put these '--tw-prose-body': 'var(--color-pink-800)', etc. in @theme, @theme inline, @theme static or wherever they would make the most sense in v4.

[rozsazoltan]

Maybe related:

• https://tailwindcss.com/docs/functions-and-directives#plugin-directive
• https://github.com/tailwindlabs/tailwindcss-typography#installation
• How to configure @tailwindcss/typography

@import "tailwindcss";
@plugin "@tailwindcss/typography";

@utility prose {
  --tw-prose-body: var(--color-primary);
  --tw-prose-headings: var(--color-primary);
  --tw-prose-bold: var(--color-primary);
  --tw-prose-quote-borders: var(--color-slate-300);
  --tw-prose-quotes: var(--color-muted-foreground);
  --tw-prose-code: var(--color-primary);

  code {
    &::before,
    &::after {
      display: none;
    }
    text-wrap: nowrap;
  }

  blockquote {
    font-weight: 400;
  }
}