xeger / quill-image

Delightful editing of rich-text image embeds in the Quill editor.
31 stars 8 forks source link

How to use with tailwindcss? #26

Open jong-kyung opened 7 months ago

jong-kyung commented 7 months ago

I use both tailwindCSS and Quill, I add inline-block style to img tag at index.css but it still doesn't work🥲 how can I solve it?

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  img {
    @apply inline-block object-cover h-full w-full
  }
}
xeger commented 6 months ago

QuillJS has its own, completely independent mechanism for managing styles. It does not necessarily work with Tailwind or Bootstrap or other libraries.

I would use browser tools to inspect the CSS that Tailwind is generating, and also to inspect the styles that apply to image elements inside Quill. You will probably find discrepancies, or Quill styles that override the base styles that Tailwind is providing.

Lokheim commented 6 months ago

So the image aligning wont work with tailwind ?

xeger commented 3 months ago

Quill will add style attributes to every DOM element inside the editor. These supercede any classname-based CSS. So nothing in Quill works with Tailwind.