Skip to content

Commit bfaedfb

Browse files
philipp-spiessphilipp-spiess
committed
Update README for Tailwind CSS v4 (#380)
1 parent a92f59b commit bfaedfb

File tree

1 file changed

+55
-100
lines changed

1 file changed

+55
-100
lines changed

‎README.md‎

Lines changed: 55 additions & 100 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
---
@@ -192,7 +184,7 @@ When stacking these modifiers with other modifiers like `hover`, you most likely
192184
<article class="prose prose-a:text-blue-600 hover:prose-a:text-blue-500">{{ markdown }}</article>
193185
```
194186

195-
Read the Tailwind CSS documentation on [ordering stacked modifiers](https://tailwindcss.com/docs/hover-focus-and-other-states#ordering-stacked-modifiers) to learn more.
187+
Read the Tailwind CSS documentation on [stacked modifiers](https://tailwindcss.com/docs/hover-focus-and-other-states) to learn more.
196188

197189
### Overriding max-width
198190

@@ -237,7 +229,15 @@ Note that you can't nest new `prose` instances within a `not-prose` block at thi
237229

238230
### Adding custom color themes
239231

240-
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:
232+
To customize the color theme beyond simple CSS overrides, you can use the JavaScript based theme API. To do that, use the `@config` directive:
233+
234+
```diff
235+
@import "tailwindcss";
236+
@plugin "@tailwindcss/typography";
237+
+ @config "./tailwind.config.js";
238+
```
239+
240+
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:
241241

242242
```js {{ filename: 'tailwind.config.js' }}
243243
/** @type {import('tailwindcss').Config} */
@@ -247,47 +247,43 @@ module.exports = {
247247
typography: ({ theme }) => ({
248248
pink: {
249249
css: {
250-
'--tw-prose-body': theme('colors.pink[800]'),
251-
'--tw-prose-headings': theme('colors.pink[900]'),
252-
'--tw-prose-lead': theme('colors.pink[700]'),
253-
'--tw-prose-links': theme('colors.pink[900]'),
254-
'--tw-prose-bold': theme('colors.pink[900]'),
255-
'--tw-prose-counters': theme('colors.pink[600]'),
256-
'--tw-prose-bullets': theme('colors.pink[400]'),
257-
'--tw-prose-hr': theme('colors.pink[300]'),
258-
'--tw-prose-quotes': theme('colors.pink[900]'),
259-
'--tw-prose-quote-borders': theme('colors.pink[300]'),
260-
'--tw-prose-captions': theme('colors.pink[700]'),
261-
'--tw-prose-code': theme('colors.pink[900]'),
262-
'--tw-prose-pre-code': theme('colors.pink[100]'),
263-
'--tw-prose-pre-bg': theme('colors.pink[900]'),
264-
'--tw-prose-th-borders': theme('colors.pink[300]'),
265-
'--tw-prose-td-borders': theme('colors.pink[200]'),
266-
'--tw-prose-invert-body': theme('colors.pink[200]'),
267-
'--tw-prose-invert-headings': theme('colors.white'),
268-
'--tw-prose-invert-lead': theme('colors.pink[300]'),
269-
'--tw-prose-invert-links': theme('colors.white'),
270-
'--tw-prose-invert-bold': theme('colors.white'),
271-
'--tw-prose-invert-counters': theme('colors.pink[400]'),
272-
'--tw-prose-invert-bullets': theme('colors.pink[600]'),
273-
'--tw-prose-invert-hr': theme('colors.pink[700]'),
274-
'--tw-prose-invert-quotes': theme('colors.pink[100]'),
275-
'--tw-prose-invert-quote-borders': theme('colors.pink[700]'),
276-
'--tw-prose-invert-captions': theme('colors.pink[400]'),
277-
'--tw-prose-invert-code': theme('colors.white'),
278-
'--tw-prose-invert-pre-code': theme('colors.pink[300]'),
250+
'--tw-prose-body': 'var(--color-pink-800)'),
251+
'--tw-prose-headings': 'var(--color-pink-900)'),
252+
'--tw-prose-lead': 'var(--color-pink-700)'),
253+
'--tw-prose-links': 'var(--color-pink-900)'),
254+
'--tw-prose-bold': 'var(--color-pink-900)'),
255+
'--tw-prose-counters': 'var(--color-pink-600)'),
256+
'--tw-prose-bullets': 'var(--color-pink-400)'),
257+
'--tw-prose-hr': 'var(--color-pink-300)'),
258+
'--tw-prose-quotes': 'var(--color-pink-900)'),
259+
'--tw-prose-quote-borders': 'var(--color-pink-300)'),
260+
'--tw-prose-captions': 'var(--color-pink-700)'),
261+
'--tw-prose-code': 'var(--color-pink-900)'),
262+
'--tw-prose-pre-code': 'var(--color-pink-100)'),
263+
'--tw-prose-pre-bg': 'var(--color-pink-900)'),
264+
'--tw-prose-th-borders': 'var(--color-pink-300)'),
265+
'--tw-prose-td-borders': 'var(--color-pink-200)'),
266+
'--tw-prose-invert-body': 'var(--color-pink-200)'),
267+
'--tw-prose-invert-headings': 'var(--color-white)',
268+
'--tw-prose-invert-lead': 'var(--color-pink-300)'),
269+
'--tw-prose-invert-links': 'var(--color-white)',
270+
'--tw-prose-invert-bold': 'var(--color-white)',
271+
'--tw-prose-invert-counters': 'var(--color-pink-400)'),
272+
'--tw-prose-invert-bullets': 'var(--color-pink-600)'),
273+
'--tw-prose-invert-hr': 'var(--color-pink-700)'),
274+
'--tw-prose-invert-quotes': 'var(--color-pink-100)'),
275+
'--tw-prose-invert-quote-borders': 'var(--color-pink-700)'),
276+
'--tw-prose-invert-captions': 'var(--color-pink-400)'),
277+
'--tw-prose-invert-code': 'var(--color-white)',
278+
'--tw-prose-invert-pre-code': 'var(--color-pink-300)'),
279279
'--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
280-
'--tw-prose-invert-th-borders': theme('colors.pink[600]'),
281-
'--tw-prose-invert-td-borders': theme('colors.pink[700]'),
280+
'--tw-prose-invert-th-borders': 'var(--color-pink-600)'),
281+
'--tw-prose-invert-td-borders': 'var(--color-pink-700)'),
282282
},
283283
},
284284
}),
285285
},
286286
},
287-
plugins: [
288-
require('@tailwindcss/typography'),
289-
// ...
290-
],
291287
}
292288
```
293289

@@ -297,18 +293,10 @@ See our internal [style definitions](https://github.com/tailwindlabs/tailwindcss
297293

298294
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:
299295

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

@@ -330,7 +318,7 @@ Now every instance of `prose` in the default class names will be replaced by you
330318

331319
### Customizing the CSS
332320

333-
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:
321+
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:
334322

335323
```js {{ filename: 'tailwind.config.js' }}
336324
/** @type {import('tailwindcss').Config} */
@@ -352,63 +340,30 @@ module.exports = {
352340
},
353341
},
354342
},
355-
plugins: [
356-
require('@tailwindcss/typography'),
357-
// ...
358-
],
359-
}
360-
```
361-
362-
Like with all theme customizations in Tailwind, you can also define the `typography` key as a function if you need access to the `theme` helper:
363-
364-
```js {{ filename: 'tailwind.config.js' }}
365-
/** @type {import('tailwindcss').Config} */
366-
module.exports = {
367-
theme: {
368-
extend: {
369-
typography: (theme) => ({
370-
DEFAULT: {
371-
css: {
372-
color: theme('colors.gray.800'),
373-
374-
// ...
375-
},
376-
},
377-
}),
378-
},
379-
},
380-
plugins: [
381-
require('@tailwindcss/typography'),
382-
// ...
383-
],
384343
}
385344
```
386345

387-
Note that for certain keys the `theme` function can return a tuple (like for `theme('fontSize.lg')` for example. In these situations, you should make sure to grab the specific part of the tuple you need:
346+
Like with all theme customizations in Tailwind, you can use CSS variables if you need access to access your theme configuration:
388347

389348
```js {{ filename: 'tailwind.config.js' }}
390349
/** @type {import('tailwindcss').Config} */
391350
module.exports = {
392351
theme: {
393352
extend: {
394-
typography: (theme) => ({
353+
typography: {
395354
DEFAULT: {
396355
css: {
397-
fontSize: theme('fontSize.base')[0],
356+
color: 'var(--color-gray-800)',
398357
// ...
399358
},
400359
},
401-
}),
360+
},
402361
},
403362
},
404-
plugins: [
405-
require('@tailwindcss/typography'),
406-
// ...
407-
],
408363
}
409364
```
410365

411-
Customizations should be applied to a specific modifier like `DEFAULT` or `xl`, and must be added under the `css` property. Customizations are authored in the same [CSS-in-JS syntax](https://tailwindcss.com/docs/plugins#css-in-js-syntax) used to write Tailwind plugins.
366+
Customizations should be applied to a specific modifier like `DEFAULT` or `xl`, and must be added under the `css` property. Customizations are authored in the same [CSS-in-JS syntax](https://v3.tailwindcss.com/docs/plugins#css-in-js-syntax) used to write Tailwind v3 plugins.
412367

413368
See [the default styles](https://github.com/tailwindlabs/tailwindcss-typography/blob/main/src/styles.js) for this plugin for more in-depth examples of configuring each modifier.
414369

0 commit comments

Comments
 (0)