Tailwind rules override the structured-text styling

🆘 Support
1

Hello,

I am currently working on a project using Next.js 14 and Tailwind CSS. I have encountered an issue where the styling of the ‘structured text’ component from DatoCMS is not being applied correctly. It appears that the styles provided by Tailwind CSS are overriding the default styles from DatoCMS.

To better illustrate the issue, I have attached two screenshots:

  1. The first screenshot shows the page with Tailwind CSS enabled, where you can see that the structured text component does not display as intended.
  2. The second screenshot displays the page without Tailwind CSS, where the structured text component appears correctly styled according to DatoCMS’s default settings.

This styling conflict is affecting the presentation of the structured text component, and I am seeking guidance on how to resolve this issue so that the DatoCMS styles can be applied without being overridden by Tailwind CSS.

2

i found a solution, i add this to my global css

.datocms-content * {
  all: revert;
}

and applied it to the specific div with StructuredText

          <div className="max-w-[720px] datocms-content">
            <StructuredText data={data.content} />
          </div>
1 Like