question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue
 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.

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:9 (2 by maintainers)

github_iconTop GitHub Comments

40reactions
forsartiscommented, Jan 20, 2021

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'] },
  // ...
}
20reactions
meanspacommented, Feb 23, 2021

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
Read more comments on GitHub >

github_iconTop Results From Across the Web

Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'
The package is tailwindcss not tailwind : npm install -D tailwindcss postcss autoprefixer vite npm tailwindcss init.
Read more >
Cannot find module 'tailwindcss' error | bobbyhadz
To solve the error "Cannot find module 'tailwindcss'", install tailwindcss , postcss and autoprefixer as dev dependencies in your project by running npm...
Read more >
Error: Loading PostCSS Plugin failed: Cannot find module &#3
Expected behavior. I expected it to work. Actual behavior. Failed to compile. ./node_modules/mdbvue/lib/css/mdb.min.css (.
Read more >
PostCSS - "Error: cannot find module 'tailwindcss'" - HUGO
Hi, I started from a new site: $ hugo new site foo $ cd foo $ hugo mod init foo added this to...
Read more >
Install Tailwind CSS using PostCSS
Installing Tailwind CSS as a PostCSS plugin is the most seamless way to integrate it with build tools like webpack, Rollup, Vite, and...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found