如何移除Tailwind Typography中动态生成<code>标签的prose样式？

以下是几个针对性的解决方法，你可以根据实际场景选择：

方法一：精准覆盖Prose中动态内容的Code样式 #

通过Tailwind Typography配置，只针对动态渲染的内容区域重置code样式，不会影响其他地方的prose代码块：

1. 先给动态内容外层加一个自定义类名的容器：

<Layout isChallenge={true} routerQueryId={routerQueryId as string}>
  <ProseContainer>
    {source ? (
      <div className="dynamic-mdx-content">
        <MDXRemote {...source} />
      </div>
    ) : (
      <p>Fetching content from GitHub...</p>
    )}
  </ProseContainer>
</Layout>

2. 在tailwind.config.js的typography配置中，针对这个容器内的code标签重置样式：

typography: {
  default: {
    css: {
      '.dynamic-mdx-content code': {
        all: 'unset', // 清除prose给code加的所有样式
        // 这里可以手动添加你需要的基础code样式，比如：
        background: '#f3f4f6',
        padding: '0.2em 0.4em',
        borderRadius: '0.25rem',
        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, monospace',
      },
      '.dynamic-mdx-content code::before': {
        content: 'none', // 移除prose默认的前后反引号
      },
      '.dynamic-mdx-content code::after': {
        content: 'none',
      },
    },
  },
}

方法二：使用not-prose隔离动态内容 #

如果不需要动态内容继承任何prose样式，可以直接给动态内容的容器加上not-prose类，这样里面的所有元素都会脱离prose的样式控制：

<Layout isChallenge={true} routerQueryId={routerQueryId as string}>
  <ProseContainer>
    {source ? (
      <div className="not-prose">
        <MDXRemote {...source} />
      </div>
    ) : (
      <p>Fetching content from GitHub...</p>
    )}
  </ProseContainer>
</Layout>

注意：这个方法会重置容器内所有元素的prose样式，如果需要保留部分元素的样式，不建议用这个。

方法三：自定义工具类重置Code样式 #

如果需要更灵活的控制，可以在全局CSS中自定义一个工具类，专门用来清除prose对code的影响：

1. 在你的全局CSS文件（比如global.css）中添加：

@layer utilities {
  .unset-prose-code {
    code {
      all: unset;
      background-color: #f3f4f6;
      padding: 0.2em 0.4em;
      border-radius: 0.25rem;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    }
    code::before,
    code::after {
      content: none !important;
    }
  }
}

2. 然后把这个类加到动态内容容器上：

<Layout isChallenge={true} routerQueryId={routerQueryId as string}>
  <ProseContainer>
    {source ? (
      <div className="unset-prose-code">
        <MDXRemote {...source} />
      </div>
    ) : (
      <p>Fetching content from GitHub...</p>
    )}
  </ProseContainer>
</Layout>

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