Tailwind CSS v4 Breaks Markdown Formatting with react-markdown

[VismayRBGowda]

When using Tailwind CSS v4 in a React project with react-markdown, the default markdown formatting (e.g., headings, lists) does not render correctly — styles appear to be completely stripped.

Steps to Reproduce:

Create a new React project using Vite or Create React App.

Install the following packages:

npm install react-markdown

Add the Tailwind import to index.css:

@import "tailwindcss";
Use react-markdown to render some sample markdown content (e.g. # Heading, * List item).

Observe the rendered output — markdown formatting will be missing.

Expected Behavior:

Markdown content should be correctly rendered with semantic HTML styled appropriately or left untouched by Tailwind’s preflight.

Actual Behavior:

The markdown content renders, but with no visible formatting. Headings, lists, and other block elements appear unstyled or inline — likely due to Tailwind's preflight reset in v4.

Code Samples:

index.css:

@import "tailwindcss";

Home.jsx:

import React from 'react';
import ReactMarkdown from 'react-markdown';

function Home() {
return (

{# Test Heading\n* Test List Item}

);
}

export default Home;
vite.config.js (if using Vite):

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
plugins: [react(), tailwindcss()],
})

Environment:

Tailwind CSS: v4.x

"dependencies": {
"@tailwindcss/vite": "^4.1.3",
"markdown-vite-test": "file:",
"react": "^19.0.0",
"react-dom": "^19.0.0",
}
Build tool: Vite

Additional Context:

Removing Tailwind entirely restores correct markdown rendering.

Overriding or customizing @tailwind base partially helps, but isn't ideal.

Appears to be caused by Tailwind's preflight reset conflicting with semantic elements rendered by react-markdown.

[wongjn]

You could consider:

• Disabling Preflight.
• Applying custom styling to elements rendered by react-markdown.

[fanofvantheman]

@VismayRBGowda

I'm a newbie but was facing the same and found that installing the typography plugin worked for me.

@import "tailwindcss";
@plugin '@tailwindcss/typography';

[luisalrp]

Do you have an example?

[Abhishek21k]

@plugin '@tailwindcss/typography';

life saver

[QuantumRaC]

@VismayRBGowda

I'm a newbie but was facing the same and found that installing the typography plugin worked for me.

@import "tailwindcss"; @plugin '@tailwindcss/typography';

life saver