Tailwind CSS is changing Hugo Typography

support
1

Hello,

I am using the PaperMod theme for my Hugo blog, and I decided to add tailwind to edit some pages (mostly single pages such as about and contact pages). The issue, is that once I get Tailwind installed and running in the blog, it changes the typography of the whole website, headings lose their bold font, and code blocks are not correctly rendered.

The issue is partially solved if I use the typography plugin of Tailwind and include prose class in _defaults/single.html but it causes other problems, such as double rendering the code sections and putting two underlines for links…

Any idea on how to get Tailwind running while keeping the typography style of the theme untouched ?

2

The theme’s CSS might be having a conflict with Tailwind’s styles. I’d suggest you just use plain CSS. I prefer using Tailwind on my own fresh theme.

3

Don’t include Tailwind’s preflight styles if you don’t want Tailwind’s default; which is to reset everything.