Tailwind React Markdown

A React component that wraps react-markdown with TailwindCSS styling to solve the CSS reset issue.

The Problem

When using TailwindCSS with react-markdown, the Tailwind's CSS reset (Preflight) removes default styling from HTML elements like headings, lists, and paragraphs. This means your markdown content appears unstyled.

The Solution

tailwind-react-markdown provides a drop-in replacement for react-markdown that automatically applies beautiful TailwindCSS classes to all markdown elements.

Installation

npm install tailwind-react-markdown react-markdown

or

yarn add tailwind-react-markdown react-markdown

or

pnpm add tailwind-react-markdown react-markdown

Usage

Basic Usage

import { TailwindMarkdown } from 'tailwind-react-markdown';

function App() {
  const markdown = `
# Hello World

This is a **bold** text and this is *italic*.

- Item 1
- Item 2
- Item 3

## Code Example

\`\`\`javascript
const greeting = "Hello!";
\`\`\`
  `;

  return <TailwindMarkdown>{markdown}</TailwindMarkdown>;
}

Custom Classes

You can override the default TailwindCSS classes for any element:

import { TailwindMarkdown } from 'tailwind-react-markdown';

function App() {
  return (
    <TailwindMarkdown
      classes={{
        h1: 'text-6xl font-extrabold text-purple-600 mb-6',
        h2: 'text-4xl font-bold text-purple-500 mb-4',
        p: 'text-lg text-gray-700 mb-4',
        a: 'text-purple-600 hover:text-purple-800 font-semibold',
      }}
    >
      {markdown}
    </TailwindMarkdown>
  );
}

Adding Container Classes

Add classes to the wrapper div:

<TailwindMarkdown className="prose prose-lg max-w-4xl mx-auto p-6">
  {markdown}
</TailwindMarkdown>

Custom Components

You can still use custom components from react-markdown:

import { TailwindMarkdown } from 'tailwind-react-markdown';

function App() {
  return (
    <TailwindMarkdown
      components={{
        img: ({ src, alt }) => (
          <img src={src} alt={alt} className="rounded-lg shadow-lg" />
        ),
      }}
    >
      {markdown}
    </TailwindMarkdown>
  );
}

Default Styles

The component applies these TailwindCSS classes by default:

| Element | Classes | |---------|---------| | h1 | text-4xl font-bold mt-6 mb-4 | | h2 | text-3xl font-bold mt-5 mb-3 | | h3 | text-2xl font-bold mt-4 mb-2 | | h4 | text-xl font-bold mt-3 mb-2 | | h5 | text-lg font-bold mt-2 mb-1 | | h6 | text-base font-bold mt-2 mb-1 | | p | mb-4 leading-relaxed | | a | text-blue-600 hover:text-blue-800 underline | | ul | list-disc list-inside mb-4 ml-4 | | ol | list-decimal list-inside mb-4 ml-4 | | li | mb-1 | | blockquote | border-l-4 border-gray-300 pl-4 italic my-4 text-gray-700 | | code | bg-gray-100 rounded px-1 py-0.5 text-sm font-mono | | pre | bg-gray-100 rounded p-4 overflow-x-auto mb-4 | | strong | font-bold | | em | italic | | hr | my-8 border-t border-gray-300 | | table | min-w-full divide-y divide-gray-300 mb-4 | | thead | bg-gray-50 | | tbody | divide-y divide-gray-200 | | tr | border-b border-gray-200 | | th | px-4 py-2 text-left font-semibold | | td | px-4 py-2 | | img | max-w-full h-auto rounded |

API

Props

| Prop | Type | Description | |------|------|-------------| | children | string | Markdown content to render | | className | string | Additional classes for the wrapper div | | classes | TailwindMarkdownClasses | Custom classes for specific elements | | components | Components | Custom react-markdown components |

TailwindMarkdownClasses

interface TailwindMarkdownClasses {
  h1?: string;
  h2?: string;
  h3?: string;
  h4?: string;
  h5?: string;
  h6?: string;
  p?: string;
  a?: string;
  ul?: string;
  ol?: string;
  li?: string;
  blockquote?: string;
  code?: string;
  pre?: string;
  strong?: string;
  em?: string;
  hr?: string;
  table?: string;
  thead?: string;
  tbody?: string;
  tr?: string;
  th?: string;
  td?: string;
  img?: string;
}

Requirements

• React 16.8+
• TailwindCSS 2.0+
• react-markdown 8.0+

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Author

Your Name

Keywords

• react
• markdown
• tailwindcss
• react-markdown
• styling
• css