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
+24Lines changed: 24 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -384,6 +384,30 @@ module.exports = {
384
384
}
385
385
```
386
386
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
+
387
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.
388
412
389
413
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