如何在ReactJS中为单个组件移除Tailwind的@base样式？

针对你用dangerouslySetInnerHTML渲染Draft-JS生成的HTML时，Tailwind的@base重置导致标题标签丢失默认样式的问题，有几种实用的解决方法：

方法一：自定义CSS恢复默认样式 #

给富文本容器添加专属类，然后针对类内的标签恢复浏览器默认样式：

1. 在你的全局Tailwind CSS文件（比如src/styles/tailwind.css）中添加自定义样式：

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

/* 恢复文章内容区域的默认标签样式 */
.post-content h1 {
  font-size: 2em;
  font-weight: 700;
  margin: 0.67em 0;
}
.post-content h2 {
  font-size: 1.5em;
  font-weight: 700;
  margin: 0.83em 0;
}
.post-content h3 {
  font-size: 1.17em;
  font-weight: 700;
  margin: 1em 0;
}
.post-content p {
  margin: 1em 0;
  line-height: 1.6;
}
/* 根据需要补充h4-h6、ul、ol等标签的样式 */

2. 修改组件中渲染富文本的容器：

<div className="w-full h-full border-y-2 my-5 post-content">
  <div dangerouslySetInnerHTML={{ __html: post.content }} />
</div>

方法二：用all: revert快速恢复所有默认样式 #

如果不想逐个标签写样式，可以用CSS的all: revert属性快速恢复容器内所有元素的浏览器默认样式：

.post-content * {
  all: revert;
}

/* 可以额外添加全局调整样式 */
.post-content {
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}

这种方式更简洁，适合需要完整保留浏览器默认样式的场景。

方法三：使用Tailwind Typography插件（推荐） #

Tailwind官方提供的@tailwindcss/typography插件专门用于处理富文本内容的样式，能快速生成美观的排版：

1. 安装插件：

npm install @tailwindcss/typography

2. 在tailwind.config.js中启用插件：

module.exports = {
  // ...其他配置
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

3. 修改组件中的富文本容器：

<div className="w-full h-full border-y-2 my-5 prose prose-lg mx-auto">
  <div dangerouslySetInnerHTML={{ __html: post.content }} />
</div>

prose类会自动为h1-h6、段落、列表、引用等标签添加合适的样式，还可以通过prose-sm、prose-xl等类调整整体字号，prose-slate等类适配不同主题色。

修改后的完整组件示例（以方法三为例） #

import { Helmet } from "react-helmet";
import { PageContainer } from "../../components/ui/page-container";
import { useSelector } from "react-redux";
import { RootState } from "../../redux/store";
import { useEffect } from "react";
import { useParams } from "react-router-dom";
import api from "../../api/requests";
import { toast } from "react-toastify";
import { useDispatch } from "react-redux";
import { setPost } from "../../redux/slices/post-slice";

export default function PostPage() {
  const post = useSelector((state: RootState) => state.post.data);
  const params = useParams();
  const dispatch = useDispatch();

  useEffect(() => {
    if (!Object.keys(post).length && params.postNameId && params.blogNameId) {
      handleGetPostDataFromBlog({ postNameId: params.postNameId, blogNameId: params.blogNameId });
    }
  }, [post]);

  async function handleGetPostDataFromBlog({
    postNameId,
    blogNameId,
  }: {
    postNameId: string;
    blogNameId: string;
  }) {
    const response = await api.getPostFromBlog({ postNameId, blogNameId });

    if (response.error) {
      return toast.error(response.message);
    }

    dispatch(setPost(response.data));
  }

  return (
    <PageContainer>
      <Helmet>
        <title>{post.title || ""}</title>
        <meta name="description" content="page to create post or read it only" />
      </Helmet>

      <h2 className="text-3xl text-center font-bold my-10">{post.title}</h2>

      <h3 className="text-lg text-center italic">{post.summary}</h3>

      {/* 使用typography插件的prose类 */}
      <div className="w-full h-full border-y-2 my-5 prose prose-lg mx-auto">
        <div dangerouslySetInnerHTML={{ __html: post.content }} />
      </div>

      <div className="my-5">
        <h4 className="text-center text-lg font-bold">By {post.author}</h4>
      </div>

      {/* <h2 className="text-2xl font-bold">Comments</h2> */}
    </PageContainer>
  );
}

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