hanzoai/tailwindcss-typography
2
0
Fork 0
mirror of https://github.com/hanzoai/tailwindcss-typography.git synced 2026-09-24 17:03:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add Tailwind v4 custom color theme example to README (#396)

Browse Source 
* Add Tailwind v4 custom color theme example to README

* Small fixes

---------

Co-authored-by: Philipp Spiess <[email protected]>
This commit is contained in:
henry-corpusant
2025-09-17 16:42:01 +02:00
committed by GitHub
co-authored by Philipp Spiess
parent f4651252ad
commit 628f7917c5
1 changed files with 46 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+46 -7
View File
@@ -249,15 +249,46 @@ Even when using a prefix for your utilities `not-prose` should not have a prefix
### 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, add a `@utility` directive to your CSS file:
```diff
@import "tailwindcss";
@plugin "@tailwindcss/typography";
+ @config "./tailwind.config.js";
```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);
}
```
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} */
@@ -338,7 +369,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} */