How to add Tailwind classes to dynamically loaded HTML in Gatsby App

I am new to React or React-based frameworks. Right now I am trying to convert WordPress website into a static website using Gatsby framework. I'm using Tailwind CSS for front-end and everything seems to be working fine except that the posts loading from WordPress database (to create static webpage) have no tailwind classes. So every post's content, such as, heading, text, lists, have no Tailwind styling.

I can use Javascript to add proper classes to different tags but it's a little tedious to write JS to add classes while all the classes are already loaded in the browser.

document.querySelectorAll("h2").forEach(function (el, i) {
  el.id = i
  el.classList.add("font-red")
})

.font-red {
  color: red;
}

<h2>Dynamically loaded heading</h2>

I want to know if there is any other way to add Tailwind classes into Gatsby pages that load content from a remote source. I am avoiding using JS or jQuery.

Any help much appreciated. Thank you!