how to add tailwingcss?

[sakarnDev]

Expected Behavior

display style tailwingcss 3

Actual Behavior

not display style tailwingcss

Steps to Reproduce the Problem

i try 2 way to add tailwindcss but print not display tailwind style 1.

 const d = new Printd()
 d.print(element, [], ['https://cdn.tailwindcss.com']

2.

 const tailwind = document.createElement('script')
 tailwind.setAttribute('src', 'https://cdn.tailwindcss.com')

 const d = new Printd({
    headElements: [tailwind],
 })

 d.print(element)

Specifications

• Version: ^1.6.0
• Node version: v18.19.0

[intuity-hans]

would live to have some guidance here, too!

[joseluisq]

The reason is that you are using a script (that is injected) but it includes styles dynamically and for some reason, those are not injected when the iframe loads.

For example, If I have a script file my_script.js and use it as a script URL then it works.

// my_script.js
window.onload = () => {
    const cssText = `
        /* some tailwind styles */
    `
    const doc = window.document
    const style = doc.createElement("style")
    style.appendChild(doc.createTextNode(cssText))

    doc.head.appendChild(style)
}

// main.js
const d = new Printd()
d.print(element, [], ['https://website.com/my_script.js']

Maybe the tailwind script is injecting its styles but not on window.onload. No idea.

But the script has a warning: cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation

What you can do is prefer to include style text or .css files rather than script files that inject other styles dynamically.