提问人：ruslan kotliar 提问时间：9/5/2023 更新时间：9/6/2023 访问量：128
Tailwind CSS 样式在抓取 Next.js 页面后未应用于 React 应用程序
Tailwind CSS Styles Not Applied in React App After Scraping Next.js Page
问：
我有一个Next.js应用程序（版本13），其中包含几个使用Tailwind CSS样式的组件。然后，这些组件从用 Node.js 编写的 React 编写的 CMS 系统中抓取，并使用 进行清理。抓取后，生成的 HTML 内容被发送到 React 前端并使用库进行解析。cheeriohtml-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.刮痧：
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 <>{html}</>;
};
4. 预期与现实：我希望页面在 Next.js 应用程序和 React CMS 中看起来相同，因为类保持不变。但是，React CMS 版本中缺少某些 Tailwind CSS 样式。
5. 支持证据：我将提供两张屏幕截图进行比较：一张来自 Next.js 应用程序，一张来自 React CMS。这将展示样式上的差异。
答：
0赞
ruslan kotliar
9/6/2023
#1
溶液：主要的挑战来自EditableMain组件，其中动态解析的HTML无法被Tailwind CSS识别：
const EditableMain: FC = () => {
// ...
useEffect(() => {
if (page) {
const parsed = parse(page as string, options);
setHtml(parsed as any);
}
}, [page]);
return <>{html}</>;
};要点：
- Tailwind CSS 可能无法识别或扫描在 JSX 中动态呈现的 HTML。
- 作为解决方法，我将 Next.js 应用程序中的组件直接集成到我的 React 应用程序中，并正确应用了样式。
- 刷新后，解析的 HTML 显示样式正确，这可能是由于样式被缓存了。
结论：Tailwind 不容易将样式应用于未由 React 渲染的动态引入的类。确保所有必要的 Tailwind 类都已呈现（即使已隐藏），以便在构建阶段被识别和保留。
评论