Vue tailwind project won't run postcss error

Question

I am trying to run my project on my laptop, it works on all other devices, has same code but for some reason I can't run tailwind on it, I am getting the following error

 in ./src/components/Adventures/Points.vue?vue&type=style&index=0&id=3e2b19af&scoped=true&lang=sass

Syntax Error: Error: Loading PostCSS Plugin failed: Object.fromEntries is not a function

(@/home/dawid/Desktop/Project/postcss.config.js)
    at Array.map (<anonymous>)


 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/stylePostLoader.js!

postcss.config.js

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

Answer 1

Recently had the same issue when installing tailwindcss v3 with Vue 3 scaffolded using @vue/cli, but when using Vite installing it by tailwindcss framework guide works perfectly.

I've tried to configuring it with this answer by @Ram. Follow the instruction installing it with Tailwind CLI, then try to edit your scripts in package.json, for example:

"scripts": {
    "tailwind": "npx tailwindcss -i ./src/assets/tailwind.css -o ./src/assets/output.css",
    "serve": "npm run tailwind && vue-cli-service serve",
    "build": "npm run tailwind && vue-cli-service build"
  },

If you want to use the --watch from tailwind CLI tool to render every changes, run the script with different terminal.

"scripts": {
    "tailwind": "npx tailwindcss -i ./src/assets/tailwind.css -o ./src/assets/output.css --watch",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },

And don't forget to import the output css in your main views.

<style>
  @import "./assets/tailwind.css";
  @import "./assets/output.css";

  ...
</style>

Answer 2

Same error here.

package.json

"dependencies": {
  "@tailwindcss/postcss7-compat": "^2.0.2",
  "autoprefixer": "^9",
  "core-js": "^3.6.5",
  "postcss": "^7.0.36",
  "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
  "vue": "^2.6.11"
},

postcss.config.js

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

Component

<template>
  <div class="flex justify-center items-center text-sm">
    new component
  </div>
</template>

<script lang="ts">
  import Vue from "vue";

  export default Vue.extend({
    name: "NewComponent"
  });

</script>

<style scoped src="@/assets/tailwind.css">

</style>

Error:

ERROR  Failed to compile with 1 error2:40:19 PM

error  in ./src/assets/tailwind.css?vue&type=style&index=0&id=2312385a&scoped=true&lang=css&shadow

Syntax Error: Error: Loading PostCSS Plugin failed: Object.fromEntries is not a function

(@/home/vsts/work/1/s/postcss.config.js)
at Array.map (<anonymous>)


@ ./node_modules/vue-style-loader??ref--6-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/postcss-loader/src??ref--6-oneOf-1-3!./src/assets/tailwind.css?vue&type=style&index=0&id=2312385a&scoped=true&lang=css&shadow 4:14-355
@ ./src/assets/tailwind.css?vue&type=style&index=0&id=2312385a&scoped=true&lang=css&shadow
@ ./src/components/NewComponent.vue?shadow
@ ./node_modules/@vue/cli-service/lib/commands/build/entry-wc.js