Next.js页面抓取后React应用中Tailwind CSS样式未生效问题

我使用Next.js 13开发的应用中，多个组件采用Tailwind CSS编写样式。该应用的页面会被React+Node.js开发的CMS系统通过cheerio抓取并清洗，生成的HTML内容发送至React前端后，经html-react-parser解析渲染。目前遇到的问题是：尽管CSS类被完整保留，但部分Tailwind CSS样式在React应用中未生效，同一页面在Next.js应用与React CMS中的显示效果存在明显差异。

相关代码示例 #

1. Next.js组件 #

// Catalog component
<section className='...'>
  {cars.data?.map((car: Car) => (
    <CarComponent key={car._id + ''} car={car} />
  ))}
</section>

// Car component
<div className='...' onClick={() => router.push(`${pathname}/${car._id}`)}>
  <DetailsComponent car={car} />
</div>

// Details component
<div className='...'>
  // Image and details here...
</div>

2. CMS抓取逻辑 #

pageByUrl: async (_, { code }) => {
  // Scraping and sanitizing logic here...
  const html = await scrapeContent('http://localhost:3000' + url);
  const page = sanitizeHTML(html);
  return { page };
}

3. React前端解析逻辑 #

const EditableMain: FC = () => {
  // Parsing and rendering logic...
  const parsed = parse(page as string, options);
  return <>{parsed}</>;
};

预期与实际情况 #

• 预期：同一页面在Next.js应用和React CMS中显示完全一致
• 实际：React CMS版本中部分Tailwind样式缺失，二者显示效果差异明显

佐证截图 #

内容的提问来源于stack exchange，提问作者ruslan kotliar