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:
Created 3 years ago
Comments:9 (2 by maintainers)

Top 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

Top 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.

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...

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 (.

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...

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...