Page.tsx has an async structure, I pull data and render it as you see. I share my parseHTML file below.

import { getPageById } from '@/app/(admin)/api/services/CmsPagesServices/cmsPagesService';
import ParseHTML from '@/app/(web)/shared/parse-html';
const Page = async () => {
  const page = await getPageById('c9b8f0ee-912a-4b6a-ee63-08dccf4b91dd');
  if (!page) {
    return;
  }

  const output = ParseHTML(page?.longDescription);

  return (
    <>
      <h1 className="sr-only">Estek Hijyenik</h1>
      <div id="content">{output}</div>
      
    </>
  );
};

export default Page;

/app/shared/parse-html.tsx

import parse, {
  HTMLReactParserOptions,
  attributesToProps,
  Element,
  domToReact,
} from 'html-react-parser';
import Link from 'next/link';

const ParseHTML = (html: string) => {
  const options: HTMLReactParserOptions = {
    replace: (domNode: any) => {
      const typedDomNode = domNode as Element;

      if (typedDomNode.attribs && typedDomNode.name === 'a') {
        const props = attributesToProps(typedDomNode.attribs);
        return (
          <Link
            {...(props as { href: string })}
            className={typedDomNode.attribs.class}
          >
            {domToReact(typedDomNode.children as any)}
          </Link>
        );
      }
    },
    htmlparser2: {
      lowerCaseTags: false,
      lowerCaseAttributeNames: false,
    },
  };

  const parsedHtml = parse(html, options);

  return parsedHtml;
};

export default ParseHTML;

tailwind-config.tsx file:

import type { Config } from 'tailwindcss';
import plugin from 'tailwindcss/plugin';

export default {
  content: [
    './src/app/**/*.{js,ts,jsx,tsx}',
  ],

...theme, 
...plugins
} satisfies Config;

My problem is this friends, my function that pulls the data written in my first page.tsx file, ie getPageById, brings me an html from the API. a normal html. classes, attributes. it doesn't matter which html parser I do it with. so the problem is not with html-react-parser. The real problem is that tailwindcss doesn't listen to the code.

In other words, if you add a red coloured class to the h1 tag in the normal page.tsx file, it works instantly and tailwind creates it. But when I print the data from the API, although it has tailwindcss classes, none of them work. When I click on the element, there is no interaction in any way, the guy doesn't eat style

What I want is, how will I render the data from the api using tailwindcss with tailwindcss? How will it read the data from the api and style these codes?