在React中使用dangerouslySetInnerHTML时，如何用Tailwind CSS样式化元素？

你可以通过以下几种方法实现：

方法1：直接在HTML字符串中添加Tailwind类 #

如果能控制HTML字符串的生成逻辑，最直接的方式就是给<span>标签加上Tailwind的类名：

function App() {
  // 在span标签中直接加入Tailwind类
  const html = '<p>Some text <br/><span class="text-red-500 font-bold">Some text</span></p>';

  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

export default App;

这种方式简单直接，适合你能修改原始HTML内容的场景。

方法2：通过父容器的自定义类统一设置样式 #

如果无法修改HTML字符串，可以给外层容器添加自定义类，然后通过全局CSS配合Tailwind的@apply来设置<span>的样式：

1. 给父容器添加自定义类：

function App() {
  const html = '<p>Some text <br/><span>Some text</span></p>';

  return <div className="rendered-content" dangerouslySetInnerHTML={{ __html: html }} />;
}

export default App;

2. 在全局CSS文件（比如globals.css）中添加样式：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .rendered-content span {
    @apply text-blue-600 italic underline;
  }
}

使用@layer components可以确保Tailwind正确识别并处理这些样式，避免被PurgeCSS移除。

注意事项 #

• 使用dangerouslySetInnerHTML时，务必确保渲染的HTML内容是可信的，避免XSS攻击风险。
• 如果使用方法2，要确保自定义类名被包含在Tailwind的内容扫描路径中（可在tailwind.config.js的content数组中配置）。

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