MDXEditor与TailwindCSS集成时样式不生效的解决方案咨询

问题背景 #

在React项目中使用MDXEditor和TailwindCSS时，由于TailwindCSS重置了默认样式，导致Markdown中的# hello world无法渲染为标题样式。已安装@tailwindcss/typography并为<MDXEditor/>添加contentEditableClassName='prose'属性，但样式仍未生效。

项目配置参考 #

项目结构 #

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

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"]
  }
}

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

修复步骤 #

• 启用typography插件：修改tailwind.config.js，在plugins数组中引入@tailwindcss/typography——这是样式不生效的核心原因，未注册插件则prose类无对应CSS规则：

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

• 优化MDXEditor类名：给contentEditableClassName添加完整的prose类组合，提升样式优先级并适配编辑器布局：

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

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

export default App

• 验证Tailwind基础样式：确保src/index.css中正确引入Tailwind核心指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

• 刷新浏览器缓存：使用Ctrl+Shift+R强制刷新，清除旧CSS缓存，确保新样式生效。

补充说明 #

• prose-lg用于调整标题和文本的字号，适配编辑器的使用场景；max-w-none取消prose类默认的宽度限制，让编辑器内容占满容器。
• 确认Tailwind的content配置包含所有JSX/TSX文件，确保动态生成的prose类被纳入样式编译。

内容的提问来源于stack exchange，提问作者milanHrabos