why my css code is not working in vuejs?

One Way

Use a deep selector in your scoped styles: .container >>> .ql-editor.

<style scoped>
  .container >>> .ql-editor {
    ...
  }
</style>

This would generated something like:

<style>
  .container[v-abc123] .ql-editor {
    ...
  }
</style>

You can read about that here: https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

---

Another Way

Don't use scope on your style tag.

---

Explanation

When you use scoped on style tags in .vue files it adds an attribute specifier to each of your CSS selectors. When Vue generates the HTML for the component it adds the attribute to the HTML so the selectors will match up. Since quill is generating the DOM for this plugin, not Vue, the selectors won't match up.

The generated CSS looks something like this:

.ql-editor[v-abc123] {}

but the element with the class ql-editor does not look like this since Vue didn't generate it, so it won't match:

<div class="ql-editor" v-abc123></div>

it just looks like this:

<div class="ql-editor"></div>

What you can do is have multiple <style> tags in your Vue file. That way you can keep the scoped styles which are very useful and only add absolutely needed global styles as well.

<style scoped>
   /* Styles for things that are in the DOM visible in your template tag */
</style>

<style>
  /* quill specific selectors (global) */
</style>

I'd try to keep the selectors in the global style as unique as possible so it doesn't leak. You can add a parent around the editors and do something like:

<style>
  .unique-to-this-component .ql-editor {
    ...
  }
</style>

What happened to me was that I did not include the end </style> tag, a thing like that can break it, so make sure you double check your vue file.