Skip to content

Commit d1e6421

Browse files
authored
Update README.md
1 parent 39d20e1 commit d1e6421

File tree

1 file changed

+24
-0
lines changed

1 file changed

+24
-0
lines changed

README.md

+24
Original file line numberDiff line numberDiff line change
@@ -381,6 +381,30 @@ module.exports = {
381381
}
382382
```
383383

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

386410
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)