How to Fix Problem with Tailwind CSS when using the react-markdown component

If you're using the react-markdown component in a Tailwind CSS project, you might notice that certain Markdown styles, such as headings, lists, and code blocks, do not render as expected. This happens because Tailwind’s @tailwind base directive resets many default browser styles, which affects Markdown rendering. Here's how to fix it.

The Problem

In a React project using Tailwind CSS, Markdown content rendered through the react-markdown component often loses its formatting. For example, while bold and italic text may work, elements like headings, code blocks, and lists might appear unstyled. The root cause is Tailwind's base styles, which reset browser defaults.

Example:

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

With Tailwind CSS included in index.css:

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

Markdown elements like # I am heading will not display correctly.

The Solution

To fix this issue, you can use Tailwind's Typography Plugin. This plugin provides pre-styled typographic defaults that work well with Markdown content.

Step 1: Install the Typography Plugin

Run the following command to add the plugin:

npm install -D @tailwindcss/typography

Step 2: Configure Tailwind to Use the Plugin

Add the plugin to your tailwind.config.js file:

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

Step 3: Apply the `prose` Class to Markdown Content

The prose class is provided by the Typography Plugin and applies sensible defaults for text styling. Update your News.jsx component as follows:

import ReactMarkdown from 'react-markdown'
import { useState } from 'react'

function News() {
  const [markdown, setMarkdown] = useState('# I am heading')

  return (
    <div className="p-4">
      <textarea
        value={markdown}
        onChange={(e) => setMarkdown(e.target.value)}
        className="mb-4 w-full rounded border p-2"
      />
      <ReactMarkdown className="prose prose-lg">{markdown}</ReactMarkdown>
    </div>
  )
}

export default News

Step 4: Customize Typography Styles (Optional)

If you need to customize the prose styles, you can extend the typography configuration in your tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            h1: {
              color: '#1a202c',
              fontWeight: '700',
            },
            code: {
              backgroundColor: '#f4f4f5',
              padding: '4px',
              borderRadius: '4px',
            },
          },
        },
      },
    },
  },
  plugins: [require('@tailwindcss/typography')],
}

Final Output

After applying these changes, Markdown content will render beautifully with Tailwind’s typographic defaults, ensuring that headings, lists, and other elements appear as expected.

FAQs

1. Why is Tailwind resetting my Markdown styles?

Tailwind’s @tailwind base directive resets browser styles to provide a consistent starting point. This includes resetting headings, lists, and other elements used in Markdown.

2. What is the `prose` class?

The prose class is a utility provided by Tailwind's Typography Plugin. It applies pre-designed styles to text content, including headings, paragraphs, and lists.

3. Can I use custom Markdown components with Tailwind?

Yes! You can customize the rendering of specific Markdown elements using the react-markdown component’s components prop.