我如何在 Vue 上使用 Sass 使用 Tailwind

Question

I wanna using tailwind with sass on vue js, I'm following tailwind docs but still got this error

this is my depedency , postcss is up to date

"dependencies": {
    "autoprefixer": "^10.1.0",
    "core-js": "^3.6.5",
    "postcss": "^8.2.1",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-import": "^14.0.0",
    "postcss-loader": "^4.1.0",
    "postcss-preset-env": "^6.7.0",
    "precss": "^4.0.0",
    "tailwindcss": "^2.0.2",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },

this is my postcss.config.js

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

any solution? how can i use tailwind with sass preprocessor on vue js? Thanks all.

Error: PostCSS plugin tailwindcss requires PostCSS 8

Answer 1

Try to uninstall that dependencies which are related to postcss and tailwind:

npm uninstall tailwindcss postcss autoprefixer

then install them using the following command:

npm i -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

according to this section

As of v2.0, Tailwind CSS depends on PostCSS 8. Because PostCSS 8 is only a few months old, many other tools in the ecosystem haven't updated yet