Mdxeditor does not apply styles when used with tailwindcss

Question

mdxeditor is markdown editor I want to use with react and tailwindcss. Having this file structure:

app_mdxeditor
├── package.json
├── package-lock.json
├── public
│   └── index.html
├── src
│   ├── App.js
│   ├── hooks
│   │   └── useCtx.js
│   ├── index.css
│   ├── index.js
│   └── pages
│       ├── Home.js
│       └── Layout.js
└── tailwind.config.js


$ cat package.json
{
  "dependencies": {
    "@mdxeditor/editor": "^2.14.0",
    "@tailwindcss/typography": "^0.5.10",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.21.2",
    "react-scripts": "5.0.1",
    "tailwindcss": "^3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

$ cat tailwind.config.js 
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

App.js:

import '@mdxeditor/editor/style.css'
import { MDXEditor, headingsPlugin } from '@mdxeditor/editor'

function App() {
  return (
    <MDXEditor
      markdown='# hello world'
      plugins={[headingsPlugin()]}
      contentEditableClassName='prose'
    />
  )
}

export default App

This simple hello world does not makes the # hello world as a header. Because tailwindcss is active and tailwind resets all default styles, including the header. Some similar question from redit. So what I did is:

1. npm i @tailwindcss/typography
2. added the contentEditableClassName='prose' prop to <MDXEditor /> so that its taken out of the tailwindcss compilation

But yet the styles are not applied - that is - the hello world is not bold and bigger as or header should be. It remains unstyled as default tailwindcss. This is html from the inspector:

<div class="mdxeditor _editorRoot_19o4e_38 _editorWrapper_19o4e_139">
  <div class="_rootContentEditableWrapper_19o4e_1047 mdxeditor-root-contenteditable">
    <div class="_contentEditable_19o4e_352 prose" contenteditable="true" role="textbox" spellcheck="true"
      style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true">
      <h1 dir="ltr"><span data-lexical-text="true">hello world</span></h1>
      <p><br></p>
    </div>
  </div>
</div>

so how to integrate the mdxeditor and tailwind (how to make the styles of mdxeditor to be applied)?