TailwindCSS getting in the way of content-collections

[RickyRaveanu]

Hi everyone! I'm new to using content-collections and I'm really enjoying it so far. I've encountered an issue when trying to transform MDX content in my project. I'm using Tailwind CSS, and it seems that Tailwind's default settings are stripping away the styles from standard HTML elements, leaving only the JSX part of the MDX content styled.

Has anyone found a way to fix this issue without needing to manually add styles or create a custom field for every piece of content? Any help would be greatly appreciated!

Thank you!
For reference that's the result without & with TailwindCSS

[sdorra]

@RickyRaveanu can you post the content of the mdx file?

[RickyRaveanu]

this is the same MDX content I had when I tried to use content-layer, and then found out it's not being maintained anymore :(

---
title: "Welcome to My Demo MDX Page in English"
summary: English Testing
---

import { useState } from 'react';

# Welcome to My Demo MDX Page

This is a simple demo of an MDX document.

## What is MDX?

MDX is a markup format that lets you seamlessly use JSX in your Markdown documents. You can import components, like React components, and use them in your Markdown.

## Interactive Counter Example

Below is a simple interactive counter implemented in React.

```jsx
const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <button onClick={() => setCount(count - 1)}>Decrease</button>
    </div>
  );
};

<Counter />

[sdorra]

The mdx you showed does not contain a single tailwind class. There is nothing which could be stripped out by content-collections. I suspect that you used tailwind typography plugin and the class prose got lost during the migration. The prose class should wrapped around the mdx content e.g.:

<article className="prose">
  <h1>{post.title}</h1>
  <MDXContent code={post.mdx} />
</article>

[RickyRaveanu]

Thank you for replying. I think my problem here is just tailwind itself. Because when I remove it, the MDX gets rendered how it should.

[RickyRaveanu]

the prose class actually solved it

<article className="mx-auto max-w-4xl py-8 prose">
    <div className="mb-8 text-center">
      <h1 className="text-3xl font-bold">{ressource.title}</h1>
      <BreadcrumbComponent/>
    </div>
    <div dangerouslySetInnerHTML={{__html: ressource.body}}/>
  </article>