Add Tailwind v4 custom color theme example to README

Author: henry-corpusant

README.md

@@ -247,7 +247,47 @@ Note that you can't nest new `prose` instances within a `not-prose` block at thi
 
 ### 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:
+To customize the color theme beyond simple CSS overrides, you can add a `@utility` directive to your CSS file.
+
+```css
+@utility prose-pink {
+  --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);
+}
+```
+
+
+For Tailwind v3, you can use the JavaScript based theme API. To do that, use the `@config` directive:
 
 ```diff
   @import "tailwindcss";