Problem with Tailwind CSS when using the react-markdown component

Question

The markdown is not working except for italic and bold. I have figured out that the problem is caused by Tailwind CSS because of how it handles text-size and other styles. If I comment out the index.css import (which defines the directives for Tailwind) in my index.jsx, all markdown types like heading, code, etc. work fine.

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

here is a link https://tailwindcss.com/docs/preflight#headings-are-unstyled — ayex, Mar 11 '23 at 16:19
you could also import the react-markdown styles in the tailwind.css... — Denis Tsoi, Mar 11 '23 at 16:22
check the answer below - this might help (i.e. `prose` isn't included in Reactmarkdown — Denis Tsoi, Mar 11 '23 at 16:46

score 6 · Accepted Answer · answered Mar 11 '23 at 21:36

6

You should add typography plugin in your tailwindcss

1.install npm install -D @tailwindcss/typography

2.add the plugin to your tailwind.config.js file:

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

use prose

<div class="prose lg:prose-xl">
  {{ markdown }}
</div>

answered Mar 11 '23 at 21:36

Eric Tsai

104
3

indeed it work, but any explanation or links would be nice to understand deeply. – ayex Mar 15 '23 at 09:58
1

https://tailwindcss.com/docs/typography-plugin – ayex Mar 15 '23 at 12:58

score 3 · Answer 2 · answered Mar 11 '23 at 16:45

Ah I think i know what the issue is @ayex.

Your React markdown doesn't have the prose classname which is what tailwind uses for the default rendering of tailwind components/text

codesandbox

import { useState } from "react";
import ReactMarkdown from "react-markdown";

const defaultMd = `# iam heading`;

const ExampleComponent = () => {
  const [markdownSource, setMarkdownSource] = useState(defaultMd);

  const onChange = ({ currentTarget: { value } }) => {
    setMarkdownSource(value);
  };

  return (
    <>
      <textarea
        onChange={onChange}
        value={markdownSource}
        className="
          font-mono
          overflow-auto
          whitespace-pre
          border-solid
          border
          border-gray-300
          resize
          w-full
        "
      />
      <ReactMarkdown className="prose">{markdownSource}</ReactMarkdown>
    </>
  );
};

const App = () => (
  <div className="App">
    <ExampleComponent />
  </div>
);

export default App;

score 2 · Answer 3 · answered May 24 '23 at 11:47

2

For any other viewers, i actually had to both...

install @tailwindcss/typography as eric suggested.
set <ReactMarkdown className="prose"># Heading 1</ReactMarkdown> as denis suggested.

answered May 24 '23 at 11:47

kevin

2,707
4
26
58

Problem with Tailwind CSS when using the react-markdown component

3 Answers3