npm - building tailwindcss with Vue3 install for production

Question

I am quite unfamiliar with npm, (I develop in python) and most of the time I just do what the tutorial says. But now I am stuck. I tried Tailwindcss in combination wit 'Vue 3' and followed the install steps from the website:website tailwind+Vue 3

npm init @vitejs/app my-project
cd my-project
npm install
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

And after adding some HTML and running:

npm run dev

everything works fine in the browser.

But then Iwant to build it for using in production I use

npm run build

and after some processing my dist folder is filled with an index.html and assets.

And here starts my problem. I was expecting that I could copy these files to my server and that it should serve my site. But All I see is a blank page.

I can't find the answer anywhere or others with same problems so I think its something stupid I just don't know. But what is it?

Hope someone can help me...

question from:https://stackoverflow.com/questions/65893403/building-tailwindcss-with-vue3-install-for-production

Answer 1

Try this, maybe something will work https://dev.to/vonagedev/using-tailwind-css-with-vue-js-b1b

Webpack (and Vue-loader which is a Webpack loader for Vue.js components) can be configured to use PostCSS which is a Webpack loader for CSS.

It will look for the configuration inside a postcss.config.js file and can build the app with CSS from packages you add. And, configure it using this code.

// postcss.config.js

const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    tailwindcss,
    autoprefixer,
  ],
};

The demo app is also generated without any CSS assets. Instead, it uses CSS inside the components (which is fine). To include Tailwind CSS, create a CSS asset using your editor or the commands below.

# mkdir -p for making parents they don't exist

mkdir -p src/assets/styles/
touch src/assets/styles/index.css

Now add this code, which adds the various packages of the Tailwind CSS library.

/* src/assets/styles/index.css */

@tailwind base;
@tailwind components;
@tailwind utilities;
```