reactjstinymcetailwind-css

Tinymce richtext editor styles overridden by tailwind css base styles. How to set preflight false to a rich text display component in React.js

My project having below stack. Tailwind css, react.js, tinymce editor.

The tailwind css @tailwind base overriding default browser css styles. I want to disable this only for a single component which display's richtext editor content.

for example: links, anchor tags, headings default browser css are overridden by tailwind base css.

I can't disable for entire project by preflight:false in tailwind config.

Any ideas, Please suggest.

Solution

  • The official Tailwind CSS Typography plugin provides a set of prose classes you can use to add beautiful typographic defaults to any vanilla HTML you don’t control, like HTML rendered from Markdown, or pulled from a CMS.