Mdxeditor 与 tailwindcss 一起使用时不应用样式

Question

mdxeditor 是 Markdown 编辑器，我想与 React 和 tailwindcss 一起使用。 具有以下文件结构：

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

这个简单的 hello world 不会将

# hello world

作为标题。因为 tailwindcss 处于活动状态，并且 tailwind 会重置所有默认样式，包括标题。来自rededit的一些类似问题。所以我所做的是：

1. npm i @tailwindcss/typography

2. 向

   contentEditableClassName='prose'

   添加了

   <MDXEditor />

   属性，以便将其从 tailwindcss 编译中取出

但是样式尚未应用 - 也就是说 -

hello world

没有像标题那样粗体和更大。它作为默认的 tailwindcss 保持无样式。这是来自检查器的 html：

<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>

那么如何整合mdxeditor和tailwind（如何让mdxeditor的样式应用到）？

Answer 1

我认为你必须将

require('@tailwindcss/typography')

添加到

tailwind.config.ts

文件中的插件才能使其正常工作：

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

https://github.com/tailwindlabs/tailwindcss-typography#installation