You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+24
Original file line number
Diff line number
Diff line change
@@ -381,6 +381,30 @@ module.exports = {
381
381
}
382
382
```
383
383
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
+
384
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.
385
409
386
410
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