reactjs 当使用React减价组件时，tailwindcss的问题

l0oc07j2 于 2023-03-12 发布在 React

关注(0)|答案(1)|浏览(134)

除了斜体和粗体之外，Markdown不起作用。我已经弄清楚了这个问题是由tailwindcss引起的，因为它如何处理文本大小和其他内容，我如何知道如果我在index.jsx中注解掉index.css导入，它定义了tailwindcss的指令，它将适用于所有Markdown类型，如标题、代码等，但我不知道如何修复，同时仍然使用tailwindcss，请提供任何帮助。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>
);

reactjs

来源：https://stackoverflow.com/questions/75706164/problem-with-tailwindcss-while-using-react-markdown-component

1条答案

按热度按时间

jtw3ybtb1#

啊，我想我知道问题是什么了。
您的React markdown没有prose类名，而tailwind使用该类名默认呈现tailwind组件/text
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;

赞(0）回复(0）举报 2023-03-12

我来回答

reactjs 当使用React减价组件时，tailwindcss的问题

1条答案

相关问题

热门标签

最新问答