Syntax Error: Error: Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'

[lloydjatkinson]

 ERROR  Failed to compile with 1 error                                                                                                                            20:44:08

 error  in ./src/assets/tailwind.css

Syntax Error: Error: Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'

Every couple of weeks I've been trying to upgrade to the latest version of the plugin but I get this error everytime.

I ran the following:

npm update
vue upgrade

  Name                       Installed       Wanted          Latest          Command to upgrade
  vue-cli-plugin-tailwind    1.4.2           1.4.2           2.0.5           vue upgrade vue-cli-plugin-tailwind

Previously it wasn't required to install Tailwind separately, is this now a requirement? If it is could it be added to the docs?

Furthermore, this is the current contents of postcss.config.js:

module.exports = {
    plugins: {
        tailwindcss: {},
        'vue-cli-plugin-tailwind/purgecss': {},
        autoprefixer: {},
    },
};

Does anything in here need to change in order to upgrade too? Really struggling to understand how to upgrade.

[forsartis]

You need to install the PostCSS 7 compatibility build of Tailwind CSS:

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

This is not necessary when running vue add tailwind in a new project, only when upgrading.

Also, remove 'vue-cli-plugin-tailwind/purgecss': {}, from your postcss.config.js and configure PurgeCSS inside tailwind.config.js:

module.exports = {
  purge: { content: ['./public/**/*.html', './src/**/*.vue'] },
  // ...
}

[meanspa]

I encountered this error after updating the plugin from 2.0.1 to 2.0.6 and re-installing the plugin was the easiest solution. Specific steps I took:

• npm uninstall vue-cli-plugin-tailwind
• vue add tailwind - For the config file option I selected none since I already had one
• Delete the node_modules folder
• npm install

[lloydjatkinson]

This is not necessary when running vue add tailwind in a new project, only when upgrading.

and re-installing the plugin was the easiest solution.

Unfortunately removing and installing the plugin does not work. Doing so results in:

 ERROR  Failed to compile with 1 error                                                                          10:28:42
 error  in ./src/assets/tailwind.css

Syntax Error: Error: Loading PostCSS Plugin failed: Cannot find module 'vue-cli-plugin-tailwind/purgecss'

Following the instructions of manually installing the dependencies also results in the same error.

I'm on Node 14.6.0 and NPM 6.14.8.

[lloydjatkinson]

(sorry, accidentally closed the issue, it's still an issue)

[forsartis]

Your postcss.config.js should look like this:

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

Remove 'vue-cli-plugin-tailwind/purgecss': {}, from the list of plugins, if it is still there.

[lloydjatkinson]

That fixed it, thank you 😄

[Cardoso-topdev]

Hi @lloydjatkinson !
I have the same error.

error  in ./src/index.css

Syntax Error: Error: Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'
Require stack:
- D:\MyProject\noop.js

(@D:\MyProject\postcss.config.js)
    at Array.map (<anonymous>)


 @ ./src/index.css 4:14-157 15:3-20:5 16:22-165
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://10.10.10.50:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

How can I solve this problem?

[joseprest]

I found solution
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.5",

Please install specific version.

[Volmarg]

I encountered this error after updating the plugin from 2.0.1 to 2.0.6 and re-installing the plugin was the easiest solution. Specific steps I took:

• npm uninstall vue-cli-plugin-tailwind
• vue add tailwind - For the config file option I selected none since I already had one
• Delete the node_modules folder
• npm install

No matter how silly this looks... it worked for me!