Reactjs 使用 reactmarkdown 组件时 Tailwind CSS 的问题

发布于03月12日

除斜体和粗体外，markdown 不起作用.我已经知道这个问题是由TailWind CSS引起的，因为它处理文本大小和其他样式的方式.如果我在index.jsx中注释掉了index.css个导入(它定义了TailWind的指令)，所有的标记类型，如标题、代码等都工作得很好.

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 使用 reactmarkdown 组件时 Tailwind CSS 的问题

推荐答案

Reactjs相关问答推荐

安装后未渲染tailwind

FireBase未与Reaction应用程序连接

TanStack/Reaction-Query在我的Vercel应用程序中不起作用

Next.js Next-Auth登录函数重定向到http：//localhost：3000/api/auth/error

如何解决Reaction中遗留的上下文API错误？

shadcn输入+窗体+Zod；一个部件正在改变要被控制的不受控制的输入；

useRef()的钩子调用无效

如何在我的 React 应用程序中仅显示我的 Register 组件

在 React 中，如何在指向同一组件的路由中拥有未定义数量的多个动态路径段？

在Vite React上获取Amplify的环境变量

ReactJS on AWS Amplify与EC2上的Spring boot服务之间的混合内容错误

使用新数据更新时，React 不更新具有过滤功能的深层嵌套对象数组中的变量状态

AWS 全栈应用程序部署教程构建失败

RTK 查询Mutations 在 StrictMode 中执行两次

在 Reactjs 中状态发生变化时渲染一个新组件而不替换旧组件

如何在 React 中单击鼠标的位置动态添加 div？

如何使用 useEffect 和 if 语句 React

理解 React 中的 PrevState

为什么我从另一个组件收到错误？

用户输入值时更改值