How do I make the prose class respect my custom font sizes?

[yaardie]

I was following a tutorial to implement the typographer plugin, but I am not sure how to make sure it inherits my font size overrides in the config file. Any tips?

[wongjn]

Consider checking you are customizing the CSS correctly. For example, to change the base font size for the prose class:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            fontSize: 'my custom font size',

[yaardie]

The prose-* set of classes don't inherit font sizes

Too bad! I will have to go with CSS and @apply here and ditch the typography plugin. Thanks though.

[wongjn]

Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

• https://twitter.com/adamwathan/status/1226511611592085504
• https://twitter.com/adamwathan/status/1559250403547652097

[yaardie]

Okay. What should the <key> value be?

[wongjn]

<key> can be the key of the fontSize value you'd like to reference. See the documentation on theme() for details.

(FYI, per #13845 (reply in thread), they say don't use @apply but you can still use CSS)

[yaardie]

<key> can be the key of the fontSize value you'd like to reference.

Perfect!

I was actually trying to implement the typography plugin to ditch the @apply. Using Hugo, however, I am using nearly 150-200 lines of CSS to style the {{ .Content }} field and I see the class 'soup' will be massive with this one for the filed wrapping that section. So, I might has to go with CSS for some things.