Skip to content

Commit 43a4c2c

Browse files
philipp-spiessphilipp-spiess
authored
Update README for Tailwind CSS v4 (#380)
1 parent d1e6421 commit 43a4c2c

File tree

1 file changed

+55
-100
lines changed

1 file changed

+55
-100
lines changed

Diff for: ‎README.md

+55-100
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
---
@@ -189,7 +181,7 @@ When stacking these modifiers with other modifiers like `hover`, you most likely
189181
<article class="prose prose-a:text-blue-600 hover:prose-a:text-blue-500">{{ markdown }}</article>
190182
```
191183

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

194186
### Overriding max-width
195187

@@ -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} */
@@ -349,63 +337,30 @@ module.exports = {
349337
},
350338
},
351339
},
352-
plugins: [
353-
require('@tailwindcss/typography'),
354-
// ...
355-
],
356-
}
357-
```
358-
359-
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:
360-
361-
```js {{ filename: 'tailwind.config.js' }}
362-
/** @type {import('tailwindcss').Config} */
363-
module.exports = {
364-
theme: {
365-
extend: {
366-
typography: (theme) => ({
367-
DEFAULT: {
368-
css: {
369-
color: theme('colors.gray.800'),
370-
371-
// ...
372-
},
373-
},
374-
}),
375-
},
376-
},
377-
plugins: [
378-
require('@tailwindcss/typography'),
379-
// ...
380-
],
381340
}
382341
```
383342

384-
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:
343+
Like with all theme customizations in Tailwind, you can use CSS variables if you need access to access your theme configuration:
385344

386345
```js {{ filename: 'tailwind.config.js' }}
387346
/** @type {import('tailwindcss').Config} */
388347
module.exports = {
389348
theme: {
390349
extend: {
391-
typography: (theme) => ({
350+
typography: {
392351
DEFAULT: {
393352
css: {
394-
fontSize: theme('fontSize.base')[0],
353+
color: 'var(--color-gray-800)',
395354
// ...
396355
},
397356
},
398-
}),
357+
},
399358
},
400359
},
401-
plugins: [
402-
require('@tailwindcss/typography'),
403-
// ...
404-
],
405360
}
406361
```
407362

408-
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.
363+
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.
409364

410365
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.
411366

0 commit comments

Comments
 (0)