Skip to content

Commit a92f59b

Browse files
adamwathanphilipp-spiess
authored andcommitted
Update README.md
1 parent 13635e7 commit a92f59b

File tree

1 file changed

+24
-0
lines changed

1 file changed

+24
-0
lines changed

README.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -384,6 +384,30 @@ module.exports = {
384384
}
385385
```
386386

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:
388+
389+
```js {{ filename: 'tailwind.config.js' }}
390+
/** @type {import('tailwindcss').Config} */
391+
module.exports = {
392+
theme: {
393+
extend: {
394+
typography: (theme) => ({
395+
DEFAULT: {
396+
css: {
397+
fontSize: theme('fontSize.base')[0],
398+
// ...
399+
},
400+
},
401+
}),
402+
},
403+
},
404+
plugins: [
405+
require('@tailwindcss/typography'),
406+
// ...
407+
],
408+
}
409+
```
410+
387411
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.
388412

389413
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.

0 commit comments

Comments
 (0)