Use @tailwindcss/typography to style react components instead of using Tailwind CSS classes directly

[raae]

The @tailwindcss/typography plugin is a solid solution for styling blocks of text, looks great out of the box.

[jtfairbank]

Yes! Thanks for the prompt @raae! I added it to style markdown content in #498 but great idea to apply it more broadly. I believe there's some legacy code that's still using custom CSS classes, I'll need to create some more issues to deal with that but then I think this could be an excellent issue for one of the new devs contributing to our project. :smile:

[coderbyheart]

Duplicate of #498 then. Thanks @raae for supporting @jtfairbank idea!

[jtfairbank]

Hey @coderbyheart I think this might not be a duplicate, I believe it should be possible to use @tailwindcss/typography styles directly, not just for styling Markdown. I don't mind leaving this closed for now but we should definitely keep it in mind, I might create a styling section in the docs or something.

[coderbyheart]

Ah, this should also be applied to the HTML created in React components, instead of the tailwind class soup?

[jtfairbank]

@coderbyheart yeah that's what I was thinking! Like, this is still tailwind but they've made it easy to set more advanced classes on parent components to style the text in child classes. And I like how that brings consistency to our typography styling instead of each component looking a little different.

[kriston-burnstein]

@jtfairbank David Victor (@webmekanic) and I would like to work on this issue together.

[Webmekanic]

I will be working on this issue with Kriston

[Webmekanic]

@jtfairbank we are currently checking the issue and we need some clarifications regarding the components to add the tailwindcss/typography styling to the react components.

[kriston-burnstein]

@jtfairbank we're specifically trying to figure out how the last commit on issue #643 affects this ticket and then how to locate the components that still need this change

[jtfairbank]

Hey @kriston-burnstein and @Webmekanic sorry for the delay in getting back to you. I think the overall idea here is to get rid of a lot of individual tailwind typography classes (like manually setting the font-size for each heading / paragraph / list / whatever), and instead use tailwind-typeography classes to apply those as a whole to different pages or content sections.

So instead of

<div>
  <h1 className="font-bold text-2xl lg:text-3xl">Title</h1>
  <p className="lg:text-lg">Paragraph</p>
</div>

We'd just apply:

<div className="prose lg:prose-xl">
  <h1>Title</h1>
  <p>Paragraph</p>
</div>

This could be done at the component level, page level, and/or possibly even at the layout level.

I'm not sure what you're referencing in #643, could you link to a specific commit?

[fedechaves]

hey @jtfairbank is this still open?