vue-html-to-paper
vue-html-to-paper copied to clipboard
mycurelabs
How to use tailwind css CDN
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
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
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.
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.