使用 react-markdown 组件时，Tailwind CSS 出现问题。

Question

除了斜体和粗体之外，Markdown无法正常工作。我已经发现问题是由Tailwind CSS引起的，因为它处理文本大小和其他样式的方式不同。如果我在index.jsx中注释掉index.css导入（它定义了Tailwind的指令），所有Markdown类型，如标题、代码等都可以正常工作。

News.jsx

import ReactMarkdown from 'react-markdown';
import { useState } from 'react';

function News() {
  const [markdown, setMarkdown] = useState('# I am heading');
  
  return (
    <div>
      <textarea value={markdown} onChange={e => setMarkdown(e.target.value)} />
      <ReactMarkdown>{markdown}</ReactMarkdown>
    </div>
  );
}

export default News;

index.css

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

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router } from "react-router-dom";
import './index.css'
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Router>
    <App />
    </Router>
  </React.StrictMode>
);

- ayex

---

这是一个链接： https://tailwindcss.com/docs/preflight#headings-are-unstyled - ayex

你也可以在tailwind.css中导入react-markdown的样式... - Denis Tsoi

@DenisTsoi 怎么做？ - ayex

请翻译以下与编程有关的内容从英文到中文。只返回翻译后的文本：请参考下面的答案 - 这可能会有所帮助（即，在Reactmarkdown中不包含“prose”）。 - Denis Tsoi

Answer 1

你应该在tailwindcss中添加排版插件

1.安装 npm install -D @tailwindcss/typography

2.将插件添加到你的tailwind.config.js文件中：

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

3. 使用散文

<div class="prose lg:prose-xl">
  {{ markdown }}
</div>

- Eric Tsai

---

确实它能工作，但任何解释或链接都会更好地理解。 - ayex

https://tailwindcss.com/docs/typography-plugin - ayex

Answer 2

针对其他观众，我实际上需要同时执行以下步骤：

1. 按照Eric的建议安装@tailwindcss/typography。
2. 按照Denis的建议设置<ReactMarkdown className="prose"># Heading 1</ReactMarkdown>。

- kevin

Answer 3

啊，我想我知道问题出在哪里了，@ayex。

你的React markdown没有使用prose类名，这是tailwind用于默认呈现tailwind组件/文本的类名。

codesandbox

import { useState } from "react";
import ReactMarkdown from "react-markdown";

const defaultMd = `# iam heading`;

const ExampleComponent = () => {
  const [markdownSource, setMarkdownSource] = useState(defaultMd);

  const onChange = ({ currentTarget: { value } }) => {
    setMarkdownSource(value);
  };

  return (
    <>
      <textarea
        onChange={onChange}
        value={markdownSource}
        className="
          font-mono
          overflow-auto
          whitespace-pre
          border-solid
          border
          border-gray-300
          resize
          w-full
        "
      />
      <ReactMarkdown className="prose">{markdownSource}</ReactMarkdown>
    </>
  );
};

const App = () => (
  <div className="App">
    <ExampleComponent />
  </div>
);

export default App;

- Denis Tsoi