1

I have almost the same problem as this question :

PostCSS 8 Error When Installing Tailwind CSS in Vue 3 (v3.2.10) without Vite (PostCSS 8 is supported)

I followed Flydev's answer and performed the same procedure :

vue create new-project
cd new-project
npm install -D @vue/compiler-sfc tailwindcss@latest postcss@latest autoprefixer@latest
npm run serve

Node and Vue/cli versions are perfect. I made the changes in my package.json folder, delete package-lock.json and then run npm install

My package.json :

{
  "name": "new-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.2.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.13",
    "@vue/compiler-sfc": "^3.2.21",
    "autoprefixer": "^10.4.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "postcss": "^8.3.11",
    "tailwindcss": "^2.2.19"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

npm run serve works ! Great ! But not Tailwind :(

So I looked at the documentation on the TailwindCSS site https://tailwindcss.com/docs/guides/vue-3-vite and I think I'm missing some manipulations to do

So I did "npx tailwindcss init -p" to create the tailwind.config.js and postcss.config.js files, but after this manipulation, the npm run serve gave me the same error as before.

Failed to compile postcss8

I really don't understand ... It tells me to need PostCSS8 even though I have version8.3.11

I did some tests, I tried to create the tailwind.config.js and postcss.config.js files myself, no problem with tailwind.config.js, but from the moment I create the postcss.config.js file and start npm run serve the error message comes back.

I wonder if we can do a VueJS project with Tailwind without Vite now...

Thank you for your help ! :)

2
  • 1
    You use Vue CLI. It uses PostCSS 7. This is covered by the docs. tailwindcss.com/docs/… Commented Nov 10, 2021 at 15:41
  • Alléluia !! I found the answer here thanks to you! many thanks Commented Nov 10, 2021 at 16:47

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.