From 9d9d36ec5e19c8909539c6b5d953a57351fdd96a Mon Sep 17 00:00:00 2001 From: Abdul Haseeb Date: Wed, 15 Jul 2020 17:16:43 -0400 Subject: [PATCH 1/3] Amended docs --- README.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/README.md b/README.md index a9e83a7..0d5aa62 100644 --- a/README.md +++ b/README.md @@ -134,6 +134,29 @@ module.exports = { } ``` +Additionally, if you want to use the `theme()` helper function for customization, you can do so: + +```js +// tailwind.config.js +module.exports = { + theme: { + typography: (theme) => ({ + default: { + css: { + color: theme('colors.gray.800'), + + // ... + } + } + }) + }, + plugins: [ + require('@tailwindcss/typography'), + // ... + ], +} +``` + 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. It's important to note that all customizations are **merged** with the defaults. If you'd like to completely override a provided size modifier, you can do so by disabling that modifier so the default styles are not included. From 8292bd00c332ce3854e25ab5bb34dc84cb0072e5 Mon Sep 17 00:00:00 2001 From: Abdul Haseeb Date: Wed, 15 Jul 2020 17:31:24 -0400 Subject: [PATCH 2/3] Tweaked wording --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0d5aa62..6e52718 100644 --- a/README.md +++ b/README.md @@ -134,7 +134,7 @@ module.exports = { } ``` -Additionally, if you want to use the `theme()` helper function for customization, you can do so: +Additionally, if you want to use the `theme()` helper function to customize this plugin's styles, you can do so by bringing it into scope: ```js // tailwind.config.js From caed2c15cfb01494fa23075817b09f67fc44219d Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Thu, 16 Jul 2020 09:21:10 -0400 Subject: [PATCH 3/3] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6e52718..b4e1ea1 100644 --- a/README.md +++ b/README.md @@ -134,7 +134,7 @@ module.exports = { } ``` -Additionally, if you want to use the `theme()` helper function to customize this plugin's styles, you can do so by bringing it into scope: +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: ```js // tailwind.config.js