feat: support typography plugin

Author: piemot

.gitignore

@@ -3,6 +3,7 @@ dist/
 frappe.css
 macchiato.css
 mocha.css
+typography.css
 
 # generated types
 .astro/

packages/catppuccin-tailwindcss/README.md

@@ -57,6 +57,12 @@
    </body>
    ```
 
+## Usage with `@tailwindcss/typography`
+
+To use with the `prose` class, import `@catppuccin/tailwindcss/typography.css` along with your flavour variant of choice.
+
+**Note**: since `@catpuccin/tailwind` auto-selects color themes, `prose-invert` will have no effect.
+
 Check out some more advanced examples at
 [tailwindcss.catppuccin.com](https://tailwindcss.catppuccin.com)!
 

packages/catppuccin-tailwindcss/package.json

@@ -20,7 +20,8 @@
   "files": [
     "./frappe.css",
     "./macchiato.css",
-    "./mocha.css"
+    "./mocha.css",
+    "./typography.css"
   ],
   "bugs": {
     "url": "https://github.com/catppuccin/tailwindcss/issues"

packages/catppuccin-tailwindcss/src/typography.scss

@@ -0,0 +1,25 @@
+@utility prose-ctp-lattex {
+  --tw-prose-body: var(--color-ctp-text);
+  --tw-prose-headings: var(--color-ctp-text);
+  --tw-prose-lead: var(--color-ctp-overlay2);
+  --tw-prose-links: var(--color-ctp-blue);
+  --tw-prose-bold: var(--color-ctp-text);
+  --tw-prose-counters: var(--color-overlay0);
+  --tw-prose-bullets: var(--color-ctp-surface2);
+  --tw-prose-hr: var(--color-ctp-surface1);
+  --tw-prose-quotes: var(--color-ctp-subtext0);
+  --tw-prose-quote-borders: var(--color-ctp-overlay2);
+  --tw-prose-captions: var(--color-ctp-text);
+  --tw-prose-kbd: var(--color-ctp-overlay2);
+  --tw-prose-kbd-shadows: color-mix(
+    in oklab,
+    var(--color-ctp-overlay2) 50%,
+    transparent
+  );
+  --tw-prose-code: var(--color-ctp-subtext0);
+  --tw-prose-pre-code: var(--color-ctp-subtext1);
+  --tw-prose-pre-bg: var(--color-ctp-mantle);
+  --tw-prose-th-borders: var(--color-ctp-surface2);
+  --tw-prose-td-borders: var(--color-ctp-surface0);
+}
+