Problem with tailwindcss while using react-markdown component

JavaScript
1

The markdown is not working except for italic and bold.i have figure out the problem is caused by tailwindcss because of how it handles text-size and others,how do i know well if i comment out the index.css import in the index.jsx which defines the directives for tailwindcss it will work for all markdown types like heading,code, etc.but i do not not how to fix that while still using tailwindcss ,any helps please.
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>
);
2

here is a link
headings-are-unstyled-in-tailwindcss

3

Tailwind is just a way to write CSS, that’s all. If it isn’t applying a set of base styles for some tags that you would like it to apply, then add that styling to your CSS? Tailwind has a set of barebones base styles, then it encourages you add more in the HTML. You can’t do that here because you don’t have access to the raw HTML before it gets created, so you need to write some more CSS.

The import of the CSS is just a feature of whatever tooling you are using, so that you can use the same tooling to handle the CSS & the JS (and so you get hot reloading when you change any CSS). Still works exactly the same, still just write CSS.

4