Skip to content

Commit c3f8363

Browse files
philipp-spiessphilipp-spiess
committed
Update README for Tailwind CSS v4
1 parent d1e6421 commit c3f8363

File tree

1 file changed

+49
-61
lines changed

1 file changed

+49
-61
lines changed

‎README.md

Lines changed: 49 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -26,19 +26,11 @@ Install the plugin from npm:
2626
npm install -D @tailwindcss/typography
2727
```
2828

29-
Then add the plugin to your `tailwind.config.js` file:
29+
Then add the plugin to your main `style.css` file:
3030

31-
```js
32-
/** @type {import('tailwindcss').Config} */
33-
module.exports = {
34-
theme: {
35-
// ...
36-
},
37-
plugins: [
38-
require('@tailwindcss/typography'),
39-
// ...
40-
],
41-
}
31+
```diff
32+
@import "tailwindcss";
33+
+ @plugin "tailwindcss/typography";
4234
```
4335

4436
---
@@ -234,7 +226,15 @@ Note that you can't nest new `prose` instances within a `not-prose` block at thi
234226

235227
### Adding custom color themes
236228

237-
You can create your own color theme by adding a new key in the `typography` section of your `tailwind.config.js` file and providing your colors under the `css` key:
229+
To customize the color theme beyond simple CSS overrides, you can use the JavaScript based theme API. To do that, use the `@config` directive:
230+
231+
```diff
232+
@import "tailwindcss";
233+
@plugin "@tailwindcss/typography";
234+
+ @config "./tailwind.config.js";
235+
```
236+
237+
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:
238238

239239
```js {{ filename: 'tailwind.config.js' }}
240240
/** @type {import('tailwindcss').Config} */
@@ -244,47 +244,43 @@ module.exports = {
244244
typography: ({ theme }) => ({
245245
pink: {
246246
css: {
247-
'--tw-prose-body': theme('colors.pink[800]'),
248-
'--tw-prose-headings': theme('colors.pink[900]'),
249-
'--tw-prose-lead': theme('colors.pink[700]'),
250-
'--tw-prose-links': theme('colors.pink[900]'),
251-
'--tw-prose-bold': theme('colors.pink[900]'),
252-
'--tw-prose-counters': theme('colors.pink[600]'),
253-
'--tw-prose-bullets': theme('colors.pink[400]'),
254-
'--tw-prose-hr': theme('colors.pink[300]'),
255-
'--tw-prose-quotes': theme('colors.pink[900]'),
256-
'--tw-prose-quote-borders': theme('colors.pink[300]'),
257-
'--tw-prose-captions': theme('colors.pink[700]'),
258-
'--tw-prose-code': theme('colors.pink[900]'),
259-
'--tw-prose-pre-code': theme('colors.pink[100]'),
260-
'--tw-prose-pre-bg': theme('colors.pink[900]'),
261-
'--tw-prose-th-borders': theme('colors.pink[300]'),
262-
'--tw-prose-td-borders': theme('colors.pink[200]'),
263-
'--tw-prose-invert-body': theme('colors.pink[200]'),
264-
'--tw-prose-invert-headings': theme('colors.white'),
265-
'--tw-prose-invert-lead': theme('colors.pink[300]'),
266-
'--tw-prose-invert-links': theme('colors.white'),
267-
'--tw-prose-invert-bold': theme('colors.white'),
268-
'--tw-prose-invert-counters': theme('colors.pink[400]'),
269-
'--tw-prose-invert-bullets': theme('colors.pink[600]'),
270-
'--tw-prose-invert-hr': theme('colors.pink[700]'),
271-
'--tw-prose-invert-quotes': theme('colors.pink[100]'),
272-
'--tw-prose-invert-quote-borders': theme('colors.pink[700]'),
273-
'--tw-prose-invert-captions': theme('colors.pink[400]'),
274-
'--tw-prose-invert-code': theme('colors.white'),
275-
'--tw-prose-invert-pre-code': theme('colors.pink[300]'),
247+
'--tw-prose-body': 'var(--color-pink-800)'),
248+
'--tw-prose-headings': 'var(--color-pink-900)'),
249+
'--tw-prose-lead': 'var(--color-pink-700)'),
250+
'--tw-prose-links': 'var(--color-pink-900)'),
251+
'--tw-prose-bold': 'var(--color-pink-900)'),
252+
'--tw-prose-counters': 'var(--color-pink-600)'),
253+
'--tw-prose-bullets': 'var(--color-pink-400)'),
254+
'--tw-prose-hr': 'var(--color-pink-300)'),
255+
'--tw-prose-quotes': 'var(--color-pink-900)'),
256+
'--tw-prose-quote-borders': 'var(--color-pink-300)'),
257+
'--tw-prose-captions': 'var(--color-pink-700)'),
258+
'--tw-prose-code': 'var(--color-pink-900)'),
259+
'--tw-prose-pre-code': 'var(--color-pink-100)'),
260+
'--tw-prose-pre-bg': 'var(--color-pink-900)'),
261+
'--tw-prose-th-borders': 'var(--color-pink-300)'),
262+
'--tw-prose-td-borders': 'var(--color-pink-200)'),
263+
'--tw-prose-invert-body': 'var(--color-pink-200)'),
264+
'--tw-prose-invert-headings': 'var(--color-white)',
265+
'--tw-prose-invert-lead': 'var(--color-pink-300)'),
266+
'--tw-prose-invert-links': 'var(--color-white)',
267+
'--tw-prose-invert-bold': 'var(--color-white)',
268+
'--tw-prose-invert-counters': 'var(--color-pink-400)'),
269+
'--tw-prose-invert-bullets': 'var(--color-pink-600)'),
270+
'--tw-prose-invert-hr': 'var(--color-pink-700)'),
271+
'--tw-prose-invert-quotes': 'var(--color-pink-100)'),
272+
'--tw-prose-invert-quote-borders': 'var(--color-pink-700)'),
273+
'--tw-prose-invert-captions': 'var(--color-pink-400)'),
274+
'--tw-prose-invert-code': 'var(--color-white)',
275+
'--tw-prose-invert-pre-code': 'var(--color-pink-300)'),
276276
'--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
277-
'--tw-prose-invert-th-borders': theme('colors.pink[600]'),
278-
'--tw-prose-invert-td-borders': theme('colors.pink[700]'),
277+
'--tw-prose-invert-th-borders': 'var(--color-pink-600)'),
278+
'--tw-prose-invert-td-borders': 'var(--color-pink-700)'),
279279
},
280280
},
281281
}),
282282
},
283283
},
284-
plugins: [
285-
require('@tailwindcss/typography'),
286-
// ...
287-
],
288284
}
289285
```
290286

@@ -294,18 +290,10 @@ See our internal [style definitions](https://github.com/tailwindlabs/tailwindcss
294290

295291
If you need to use a class name other than `prose` for any reason, you can do so using the `className` option when registering the plugin:
296292

297-
```js {{ filename: 'tailwind.config.js' }}
298-
/** @type {import('tailwindcss').Config} */
299-
module.exports = {
300-
theme: {
301-
// ...
302-
},
303-
plugins: [
304-
require('@tailwindcss/typography')({
305-
className: 'wysiwyg',
306-
}),
307-
]
308-
...
293+
```css
294+
@import "tailwindcss";
295+
@plugin "@tailwindcss/typography" {
296+
className: wysiwyg;
309297
}
310298
```
311299

@@ -327,7 +315,7 @@ Now every instance of `prose` in the default class names will be replaced by you
327315

328316
### Customizing the CSS
329317

330-
If you want to customize the raw CSS generated by this plugin, add your overrides under the `typography` key in the `theme` section of your `tailwind.config.js` file:
318+
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:
331319

332320
```js {{ filename: 'tailwind.config.js' }}
333321
/** @type {import('tailwindcss').Config} */

0 commit comments

Comments
 (0)