You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+11-12Lines changed: 11 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -247,7 +247,7 @@ Note that you can't nest new `prose` instances within a `not-prose` block at thi
247
247
248
248
### Adding custom color themes
249
249
250
-
To customize the color theme beyond simple CSS overrides, you can add a `@utility` directive to your CSS file.
250
+
To customize the color theme beyond simple CSS overrides, add a `@utility` directive to your CSS file:
251
251
252
252
```css
253
253
@utility prose-pink {
@@ -286,16 +286,7 @@ To customize the color theme beyond simple CSS overrides, you can add a `@utilit
286
286
}
287
287
```
288
288
289
-
290
-
For Tailwind v3, you can use the JavaScript based theme API. To do that, use the `@config` directive:
291
-
292
-
```diff
293
-
@import "tailwindcss";
294
-
@plugin "@tailwindcss/typography";
295
-
+ @config "./tailwind.config.js";
296
-
```
297
-
298
-
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:
289
+
For Tailwind v3, update the `typography` section in the JavaScript config file and provide your colors under the `css` key:
299
290
300
291
```js {{ filename: 'tailwind.config.js' }}
301
292
/**@type{import('tailwindcss').Config}*/
@@ -376,7 +367,15 @@ Now every instance of `prose` in the default class names will be replaced by you
376
367
377
368
### Customizing the CSS
378
369
379
-
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:
370
+
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:
371
+
372
+
```diff
373
+
@import"tailwindcss";
374
+
@plugin "@tailwindcss/typography";
375
+
+@config "./tailwind.config.js";
376
+
```
377
+
378
+
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:
0 commit comments