CODEWITHSUNDEEP
reactjstailwind-cssfroala
Gui C
Gui C

Reputation: 1

External style from Tailwind apply in Froala editor

I'm using React for this issue : So in Froala i want the current style and not the external style of my app generate by Tailwind and for example when i change the format paragraph for a heading 1 there is no changes because the tailwind base style is applying.

Like here : https://i.sstatic.net/lnbDu.png

My global css is import in my App and the FroalaEditor is a component call in my application.

Is there a way to prevent index.css to apply in one component ?

Thanks !

Upvotes: 0

Views: 525

Answers (1)

urgency.dev
urgency.dev

Reputation: 51

First, you want to prevent the default Froala styles from applying to the contents of the editor. To do that, import the froala_editor.css file instead of the froala_editor.pkgd.css -- that will include the styles for the editor itself (buttons, etc.), but not the content of the field.

Second, apply the Tailwind styles you need to the .fr-view class, which is assigned to the div containing your field content.

For example:

/* Froala */
@import "@/froala-editor/css/froala_editor.css";

/* Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Froala Component */
@layer components {
  .fr-view {
    @apply prose; // This class applies Tailwind Typography styles 
  }
}

For my use case, I use Tailwind Typography to style the output of my editor. You could also include your own default styles for all of the elements you want to style.

Upvotes: 1

Related Questions