From ce1ff609e5c8a20cd7978f7662f1c2ac3e5da68d Mon Sep 17 00:00:00 2001
From: henry-corpusant <henry@corpusant.ai>
Date: Fri, 18 Jul 2025 15:30:06 -0700
Subject: [PATCH 1/2] Add Tailwind v4 custom color theme example to README

---
 README.md | 42 +++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index b2015d6..6dff51a 100644
--- a/README.md
+++ b/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";

From e403334841c4402d404b0e85101180a07e61ced5 Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Wed, 17 Sep 2025 16:35:48 +0200
Subject: [PATCH 2/2] Small fixes

---
 README.md | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 6dff51a..bca1cbf 100644
--- a/README.md
+++ b/README.md
@@ -247,7 +247,7 @@ 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 add a `@utility` directive to your CSS file.
+To customize the color theme beyond simple CSS overrides, add a `@utility` directive to your CSS file:
 
 ```css
 @utility prose-pink {
@@ -286,16 +286,7 @@ To customize the color theme beyond simple CSS overrides, you can add a `@utilit
 }
 ```
 
-
-For Tailwind v3, you can use the JavaScript based theme API. To do that, use the `@config` directive:
-
-```diff
-  @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:
+For Tailwind v3, update the `typography` section in the JavaScript config file and provide your colors under the `css` key:
 
 ```js {{ filename: 'tailwind.config.js' }}
 /** @type {import('tailwindcss').Config} */
@@ -376,7 +367,15 @@ Now every instance of `prose` in the default class names will be replaced by you
 
 ### Customizing the CSS
 
-If you want to customize the raw CSS generated by this plugin, first follow the steps from [adding custom color themes](#adding-custom-color-themes) to set up a JavaScript based configuration API and then add your overrides under the `typography` key in the `theme` section of your `tailwind.config.js` file:
+If you want to customize the raw CSS generated by this plugin, you can use the JavaScript based theme API. To do that, use the `@config` directive:
+
+```diff
+  @import "tailwindcss";
+  @plugin "@tailwindcss/typography";
++ @config "./tailwind.config.js";
+```
+
+You can then create your own config by adding a new `tailwind.config.js` file with the `typography` section and providing your styles under the `css` key:
 
 ```js {{ filename: 'tailwind.config.js' }}
 /** @type {import('tailwindcss').Config} */