tailwind scans your source code and only gives you the styling for the classes that tailwind detects. https://tailwindcss.com/docs/content-configuration#class-detection-in-depth

tailwind doesn't scan your database, so it can't know that xl:flex is used. so you need to list in your code the class xl:flex and all other classes that can possibly come from the database for tailwind to pick them up.

And how do I fix this? What's your idea?

Also this problem is happening even though I am not using tailwind right now, I have 5 css files. While the html I took as an example uses these styles, when I put it on the api and pull it, some paddings and etc. do not work. why do you think it could be? I still think it could be tailwind, but this time there is no class that uses tailwind. so tailwind is not used this time in html, but it doesn't work again.
@joulev

Joulev literally wrote the solution. Your code needs to have to classes listed somewhere so that when tailwind does a scan it can find they are being used.

Take a look at this for another way to solve this although not as recommended:
https://tailwindcss.com/docs/content-configuration#safelisting-classes

Yes, I understand what you mean, but this time there is another logic error, I just realised it. As I just said, even if I remove tailwind (I don't use classes, I deleted the config file), it is an api that only uses it with the values in the css file. it reads the classes in the css file, but it still doesn't work properly. so the same thing happened with tailwind. for this I actually wrote it again. thank you, I will look.

well this works for me

import parse from 'html-react-parser';

export default function Page() {
  const contentFromDatabase = `
    <div class="red">This works</div>
    <div className="red">This doesn't work in dangerouslySetInnerHtml but still works in html-react-parser</div>
  `;
  return (
    <div>
      <div>
        <h2>dangerouslySetInnerHtml</h2>
        <div dangerouslySetInnerHTML={{ __html: contentFromDatabase }} />
      </div>
      <div>
        <h2>html-react-parser</h2>
        <div>{parse(contentFromDatabase)}</div>
      </div>
    </div>
  );
}

.red {
  color: red;
}

there is no react code in the data coming from the api. i still used html parser but it comes corrupted no matter what. same when using tailwind

look, for example, the red colour class works but the flex class does not work. think like this. we see the flex class in the console but it is not applied to styling. But the red class is applied. not only flex but also some paddings. extremely frustrating I can't solve this for 1 week

The flex class needs to be available in the css. So either you need to tell tailwind to include that class, or you need to declare that class in your app css code

Can’t just say “flex” and expect it to automagically add “flex” to you, since nothing scans your database for classes and runtime values are not scanned for classes either

Well, what if I tell you something like this, right now, it doesn't matter whether the html from the api is tailwind or custom style. I manually placed it where I printed the html. everything is working fine at the moment. but when I send it to the api and pull it (I converted it to normal html code), the distortions I mentioned occur. is there a logic error? what do you think it could be?

well i must say that with this much information, i can't know. there is too little information to even make a guess.