TailwindCSS Styles not rendering when styles are stored in a variable string

I am using WordPress, ReactJS, WpGraphQL and Advanced Custom Fields.

I am storing the TailwindCSS styles in a text string within ACF and I am getting that string returned in react via GraphQL. The problem is that the variable is not rendering the CSS styles in the string correctly. Posting my code will not fully help, but here is how I am adding in the classes to the HTML.

<section className={data.page.contactPage.pageBackgroundImageStyles} style={{ backgroundImage: `url(${data.page.contactPage.pageBackgroundImage.mediaItemUrl})`, backgroundAttachment: "fixed" }}>
  <div className={data.page.contactPage.contactPageStyles}>
    <p className={data.page.contactPage.pageDescriptionStyles}>{data.page.contactPage.pageDescription}</p>
    <h1 className={data.page.contactPage.formTitleStyles}>{data.page.contactPage.formTitle}</h1>
    <ContactForm />
  </div>
</section>

I have tried using the “ conotation in react to get the variable to display, but the results are the same