Use with tailwindcss #19

jiexaspb · 2022-10-15T21:22:32Z

I use tailwindcss and I need to specify h1, ol, ul styles, I do it like this in my component:

<style>
.editor h1 {
  @apply text-3xl;
}
</style>

It works:

But when I press print, the styles are not applied. How can this be fixed?

Thanks

The text was updated successfully, but these errors were encountered:

motla · 2022-10-15T21:56:47Z

Hello!

When printing, all of the <body> content is replaced temporarily by the document itself, with a different stylesheet adapted for printing.

So I would guess that maybe part of your CSS has been located in the <body> section and is not kept during the print operation.
Otherwise it could be a style overload but it is less probable.

If this doesn't help, can you provide me a link to your work so I could check what is going wrong?

motla · 2022-10-15T22:05:45Z

Well actually I just checked the before_print method and it doesn't take the class nor style into account...
I have to patch it for your use case to work. I can look at it probably tomorrow.

vue-document-editor/src/DocumentEditor/DocumentEditor.vue

Lines 423 to 477 in 80451dc

    
               before_print () { 
        
                 // store the current body aside 
        
                 this._page_body = document.body; 
        
                 // create a new body for the print and overwrite CSS 
        
                 const print_body = document.createElement("body"); 
        
                 print_body.style.margin = "0"; 
        
                 print_body.style.padding = "0"; 
        
                 print_body.style.background = "white"; 
        
                 // clone each page to the print body 
        
                 for(const [page_idx, page] of this.pages.entries()){ 
        
                   const page_elt = this.pages_refs[page.uuid]; 
        
                   const page_clone = page_elt.cloneNode(true); 
        
                   page_clone.style = ""; // reset page style for the clone 
        
                   page_clone.style.position = "relative"; 
        
                   page_clone.style.padding = this.page_margins; 
        
                   page_clone.style.breakBefore = page_idx ? "page" : "auto"; 
        
                   // add overlays if any 
        
                   const overlay_elts = this.pages_overlay_refs[page.uuid]; 
        
                   if(overlay_elts){ 
        
                     const overlay_clone = overlay_elts.cloneNode(true); 
        
                     overlay_clone.style.position = "absolute"; 
        
                     overlay_clone.style.left = "0"; 
        
                     overlay_clone.style.top = "0"; 
        
                     overlay_clone.style.transform = "none"; 
        
                     overlay_clone.style.padding = "0"; 
        
                     overlay_clone.style.overflow = "hidden"; 
        
                     page_clone.prepend(overlay_clone); 
        
                   } 
        
                   print_body.append(page_clone); 
        
                 } 
        
                 // display a return arrow to let the user restore the original body in case the navigator doesn't call after_print() (it happens sometimes in Chrome) 
        
                 const return_overlay = document.createElement("div"); 
        
                 return_overlay.className = "hidden-print"; // css managed in update_css_media_style method 
        
                 return_overlay.style.position = "fixed"; 
        
                 return_overlay.style.left = "0"; 
        
                 return_overlay.style.top = "0"; 
        
                 return_overlay.style.right = "0"; 
        
                 return_overlay.style.bottom = "0"; 
        
                 return_overlay.style.display = "flex"; 
        
                 return_overlay.style.alignItems = "center"; 
        
                 return_overlay.style.justifyContent = "center"; 
        
                 return_overlay.style.background = "rgba(255, 255, 255, 0.95)"; 
        
                 return_overlay.style.cursor = "pointer"; 
        
                 return_overlay.innerHTML = '<svg width="220" height="220"><path fill="rgba(0, 0, 0, 0.7)" d="M120.774,179.271v40c47.303,0,85.784-38.482,85.784-85.785c0-47.3-38.481-85.782-85.784-85.782H89.282L108.7,28.286L80.417,0L12.713,67.703l67.703,67.701l28.283-28.284L89.282,87.703h31.492c25.246,0,45.784,20.538,45.784,45.783C166.558,158.73,146.02,179.271,120.774,179.271z"/></svg>' 
        
                 return_overlay.addEventListener("click", this.after_print); 
        
                 print_body.append(return_overlay); 
        
                 // replace current body by the print body 
        
                 document.body = print_body; 
        
               },

jiexaspb · 2022-10-16T06:26:40Z

Yes, that's right, thanks. Will wait

motla · 2022-10-16T09:43:07Z

Hi!
It should be fixed in v1.2.8 (Vue2) and v2.0.7 (Vue3).
Please let me know if you still have issues.

jiexaspb · 2022-10-16T19:35:11Z

thank you, problem solved

motla closed this as completed Oct 16, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use with tailwindcss #19

Use with tailwindcss #19

jiexaspb commented Oct 15, 2022

motla commented Oct 15, 2022

motla commented Oct 15, 2022

jiexaspb commented Oct 16, 2022 •

edited

Loading

motla commented Oct 16, 2022 •

edited

Loading

jiexaspb commented Oct 16, 2022

Use with tailwindcss #19

Use with tailwindcss #19

Comments

jiexaspb commented Oct 15, 2022

motla commented Oct 15, 2022

motla commented Oct 15, 2022

jiexaspb commented Oct 16, 2022 • edited Loading

motla commented Oct 16, 2022 • edited Loading

jiexaspb commented Oct 16, 2022

jiexaspb commented Oct 16, 2022 •

edited

Loading

motla commented Oct 16, 2022 •

edited

Loading