Sage 10 & @tailwindcss/typography

[frankstallone]

I am enjoying this workflow so far, with a few bumps along the way. I realize @tailwindcss/typography was created for situations like this, where we have content written in a CMS, and we do not expect content writers to do h1.font-xl however, when I am making PHP templates, I need to add the prose class or else I do not get any styling in those sections for fonts.

I removed @tailwindcss/typography and instead made a custom fonts.scss where I bring my custom typefaces, and set defaults like what prose offers. That gives me the flexibility of having those classes through the entire app. No matter if I write an h1 in a PHP template, or in the CMS I have those defaults.

Another reason I removed @tailwindcss/typography is because when I am creating a custom PHP template or blade partial and want to change the defaults I need to use the important class to overwrite the prose class defaults. That, was a nail in the coffin for me. Curious to hear other’s experiences. Maybe I am doing it wrong?

[fabianwurk]

Faced similar issue recently, and spent quite a bit of time researching other best practice methods. Like you, I didnt like the idea of using prose with typography plugin, and decided to come up with my own version that avoided the additional class, so, in my config I added various font heading sizes (a set for mobile and a set for medium up - and loosely based them on the Major Second and Minor Third type scales):

  fontSize: {
    'h1': ['28px', {
      lineHeight: '34px',
    }],
    'h2': ['24px', {
      lineHeight: '30px',
    }],
    'h3': ['20px', {
      lineHeight: '26px',
    }],
    'h4': ['18px', {
      lineHeight: '22px',
    }],
    'h1-m': ['38px', {
      lineHeight: '32px',
    }],
    'h2-m': ['24px', {
      lineHeight: '28px',
    }],
    'h3-m': ['20px', {
      lineHeight: '30px',
    }],
    'h4-m': ['18px', {
      lineHeight: '22px',
    }],
  },

Then in my app.scss I just used abstraction via @apply to add them to standard h1, h2 etc base classes eg:

h1 {
  @apply text-h1 md:text-h1-m;
}

h2 {
  @apply text-h2 md:text-h2-m;
}

h3 {
  @apply text-h3 md:text-h3-m;
}

h4 {
  @apply text-h4 md:text-h4-m;
}

and so far, this approach seems to be working well with blade templates and Gutenberg blocks, and no need for using !important thankfully.

[frankstallone]

TIL: fontSize config is a thing, and the only two things you can set is the font size and line height. I noticed you did not touch the margins here, are you keeping those as whatever defaults exist on Tailwind by default?

Thanks for sharing @fabianwurk!

[fabianwurk]

Sorry, just stripped them out from the @apply for explanation purposes as we sometimes use different tailwind classes depending on project eg:

h1 {
  @apply text-h1 md:text-h1-m font-semibold mb-3 text-pcol uppercase leading-relaxed;
}

h2 {
  @apply text-h2 md:text-h2-m font-semibold mb-3 text-pcol uppercase leading-relaxed;
}

h3 {
  @apply text-h3 md:text-h3-m font-semibold mb-3 text-pcol uppercase leading-relaxed;
}

h4 {
  @apply text-h4 md:text-h4-m font-semibold mb-3 text-pcol uppercase leading-relaxed;
}