Contentful logo

Contentful Community

Problem with rich text and tailwind .. why?

When i’m using

{documentToReactComponents(directions)}
it renders normal but when i’m using tailwind
it renders the rich text in one line like this:


What the solution to this?

Tailwind includes a reset, so elements without classes essentially render without styling.

The solution you are looking for is to use the Tailwind Typography plugin, and wrap your rich text content in something like

<div class="prose ..."></div>

to apply styles to elements without classes.

1 Like

Didn’t fix the problem