search

mycurelabs / vue-html-to-paper

Vue mixin for paper printing html elements.
MIT License
298 stars 101 forks source link

How to use tailwind css CDN #111

Open DsWebApp opened 2 years ago

DsWebApp commented 2 years ago

I am using tailwind in NUXT, name: '_blank', specs: [ 'fullscreen=yes', 'titlebar=yes', 'scrollbars=yes' ], styles: [ 'https://cdn.tailwindcss.com', ], timeout: 1000, // default timeout before the print window appears autoClose: true, // if false, the window will not close after printing } not working

kaungsandev commented 2 years ago

CDN version for tailwindcss can't be added to styles because it should be call as script as shown in official documentation of tailwindcss. My solution is generate tailwindcss with their standalone version Tailwindcss standalone version . You should output your "output.css" in public folder so that CSS can be loaded when new window is pop up and load your whatever you want to print.

How to generate

I install tailwindcss as documented in their official website and I use Vite framework. I use npm so I call it like

npx tailwindcss -i './src/index.css' -o './public/css/tailwind.css'

I call it like

styles:[ '../css/tailwind.css' ],

I am using it in vue3 and my folder structure is like
/pubilc/css/tailwind.css (This tailwind.css is output of standalone generation mentioned above.) /src /dist /node_modules

nency-gajjar commented 2 years ago

I am using tailwind in NUXT, name: '_blank', specs: [ 'fullscreen=yes', 'titlebar=yes', 'scrollbars=yes' ], styles: [ 'https://cdn.tailwindcss.com', ], timeout: 1000, // default timeout before the print window appears autoClose: true, // if false, the window will not close after printing } not working

Facing the same issue.

nency-gajjar commented 2 years ago

CDN version for tailwindcss can't be added to styles because it should be call as script as shown in official documentation of tailwindcss. My solution is generate tailwindcss with their standalone version Tailwindcss standalone version . You should output your "output.css" in public folder so that CSS can be loaded when new window is pop up and load your whatever you want to print.

How to generate

I install tailwindcss as documented in their official website and I use Vite framework. I use npm so I call it like

npx tailwindcss -i './src/index.css' -o './public/css/tailwind.css'

I call it like

styles:[ '../css/tailwind.css' ],

I am using it in vue3 and my folder structure is like /pubilc/css/tailwind.css (This tailwind.css is output of standalone generation mentioned above.) /src /dist /node_modules

Can you please explain further how to use tailwind css CDN to print with styles in Nuxt.