tailwindcss: TypeError: getProcessedPlugins is not a function

Describe the problem:

Upgraded from TailwindCSS 1.9.6 to 2.0.1 for my angular project following the instructions on their website. I had previously used the following guide: https://notiz.dev/blog/angular-10-with-tailwindcss#setup to Install the previous version and that worked before.

Please see error below:

ERROR in Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: getProcessedPlugins is not a function
    at /home/greg/angular-website/frontend/node_modules/tailwindcss/lib/processTailwindFeatures.js:71:83
    at LazyResult.runOnRoot (/home/greg/angular-website/frontend/node_modules/postcss/lib/lazy-result.js:276:16)
    at LazyResult.runAsync (/home/greg/angular-website/frontend/node_modules/postcss/lib/lazy-result.js:328:26)
    at async Object.loader (/home/greg/angular-website/frontend/node_modules/postcss-loader/dist/index.js:94:14)

ERROR in ./src/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/sass-loader/dist/cjs.js??ref--13-4!./node_modules/postcss-loader/dist/cjs.js??ref--17!./src/styles.scss)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: getProcessedPlugins is not a function
    at /home/greg/angular-website/frontend/node_modules/tailwindcss/lib/processTailwindFeatures.js:71:83
    at LazyResult.runOnRoot (/home/greg/angular-website/frontend/node_modules/postcss/lib/lazy-result.js:276:16)
    at LazyResult.runAsync (/home/greg/angular-website/frontend/node_modules/postcss/lib/lazy-result.js:328:26)
    at async Object.loader (/home/greg/angular-website/frontend/node_modules/postcss-loader/dist/index.js:94:14)

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 6
  • Comments: 81 (4 by maintainers)

Commits related to this issue

Most upvoted comments

@alexcroox I managed to fix it on my end.

What I did was I removed the existing tailwind.config.js and just ran the command npx tailwindcss init --full, then I just applied the custom configurations that I did to it. I’m going to close the issue since I fixed my original issue

+66
GregSitholeEntrostat on Nov 19, 2020

Check your nodejs version (node -v) , I had v10.19.0, then made global update to v14.15.1, using vue-cli with the following dependencies "dependencies": { "autoprefixer": "^9.8.6", "core-js": "^3.6.5", "postcss": "^7.0.35", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1", "vue": "^2.6.11", "vue-router": "^3.4.9" },

After updating node and running npm run serve I was able to build the tailwind under vue-cli

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

tailwind.config.js module.exports = { purge: { content: ['./public/**/*.html', './src/**/*.vue'] }, darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }

+48
keljtanoski on Nov 19, 2020

I too am getting this, I’m using the PostCSS 7 compatibility build with Vue 2

“postcss”: “^7.0.35”, “tailwindcss”: “^2.0.1-compat”

For anyone coming from Google, you need to make sure you have upgraded to Node.js 12.13 or higher for Tailwind v2

+26
alexcroox on Feb 24, 2021

I also had this issue. did you follow the upgrade guide?

Specifically, did you upgrade postcss? npm install tailwindcss@latest postcss@latest autoprefixer@latest

+20
lesteak on Nov 19, 2020

@SimonPrague Just spent 20 minutes recreating your project manually, the issue in your config is presets: [] in your tailwind.config.js file. You are telling Tailwind to disable the default config which causes things to blow up when you don’t provide everything it’s expecting manually. We can make this fail more gracefully for sure but this gets your project to build fine:

  // tailwind.config.js
  module.exports = {
    // ...
-   presets: []
    // ...
  }
+19
adamwathan on Nov 22, 2020

I managed solving the problem like so: https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

+14
creimers on Nov 19, 2020

@SimonPrague Just spent 20 minutes recreating your project manually, the issue in your config is presets: [] in your tailwind.config.js file. You are telling Tailwind to disable the default config which causes things to blow up when you don’t provide everything it’s expecting manually. We can make this fail more gracefully for sure but this gets your project to build fine:

  // tailwind.config.js
  module.exports = {
    // ...
-   presets: []
    // ...
  }

This solutions works on my Next.js project! Thanks

This worked for me as well!

Me too! I’m glad it was an easy fix for such a cryptic error 😄

+11
danielbachhuber on Jun 23, 2021

Can someone publish a GitHub repo that reproduces the issue? I suspect it will be fixed by switching to the new compatibility build:

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

The issue we have been seeing is that npm install tailwindcss@compat installs ^2.0.1-compat which also matches 2.0.1 which was causing the wrong version to be installed in some situations.

More details here: https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

+10
adamwathan on Nov 19, 2020

upgrading node to 14.15.1 as @CreateSean suggested solved my issue

+8
jstoppa on Nov 29, 2020

Yep, I followed these instructions. I tried both latest and comp versions. Still the same problem.

+8
SimonPrague on Nov 19, 2020

Check your nodejs version (node -v) , I had v10.19.0, then made global update to v14.15.1, using vue-cli with the following dependencies "dependencies": { "autoprefixer": "^9.8.6", "core-js": "^3.6.5", "postcss": "^7.0.35", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1", "vue": "^2.6.11", "vue-router": "^3.4.9" },

After updating node and running npm run serve I was able to build the tailwind under vue-cli

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

tailwind.config.js module.exports = { purge: { content: ['./public/**/*.html', './src/**/*.vue'] }, darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }

These work for me! 👌

+7
Pblfer on Dec 15, 2020

In my case this was solved by updating node from 10.22.0 to 14.15.1.

I thought I already did that before but I made a mistake in WSL 2 in Windows when updating it the first time.

+7
michalhudecek on Nov 20, 2020

@SimonPrague Just spent 20 minutes recreating your project manually, the issue in your config is presets: [] in your tailwind.config.js file. You are telling Tailwind to disable the default config which causes things to blow up when you don’t provide everything it’s expecting manually. We can make this fail more gracefully for sure but this gets your project to build fine:

  // tailwind.config.js
  module.exports = {
    // ...
-   presets: []
    // ...
  }

This solutions works on my Next.js project! Thanks

+6
rifandani on Feb 1, 2021

Could be Node version too. If you use nvm like me, check if your Node is => 12

+6
Youhan on Dec 28, 2020

@SimonPrague Just spent 20 minutes recreating your project manually, the issue in your config is presets: [] in your tailwind.config.js file. You are telling Tailwind to disable the default config which causes things to blow up when you don’t provide everything it’s expecting manually. We can make this fail more gracefully for sure but this gets your project to build fine:

  // tailwind.config.js
  module.exports = {
    // ...
-   presets: []
    // ...
  }

Adam, thanks so much! I really appreciate your 20 minutes spending on it. I spent over 5 hours on it and could not figure it out. Anyway thanks a ton. Also love the Tailwind & Tailwind UI!

+5
SimonPrague on Nov 23, 2020

I had this issue until I updated Node.js from v10.16.0 to v14.15.1.

My package.json is:

"dependencies": {
    "autoprefixer": "^10.0.2",
    "postcss": "^8.1.9",
    "tailwindcss": "^2.0.1"
}

Hopefully this helps anyone who needs the latest version, and doesn’t want to use the compatibility version.
That being said, even the compatibility version didn’t work for me - so I guess just make sure Node.js is up to date (note: not NPM, although make sure that’s up to date too)!

+5
BritishWerewolf on Nov 22, 2020

This worked for me. Along with adding a .nvmrc file to change Node to v12

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
+5
scottyzen on Nov 21, 2020

Check your nodejs version (node -v) , I had v10.19.0, then made global update to v14.15.1, using vue-cli with the following dependencies "dependencies": { "autoprefixer": "^9.8.6", "core-js": "^3.6.5", "postcss": "^7.0.35", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1", "vue": "^2.6.11", "vue-router": "^3.4.9" },

After updating node and running npm run serve I was able to build the tailwind under vue-cli

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

tailwind.config.js module.exports = { purge: { content: ['./public/**/*.html', './src/**/*.vue'] }, darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }

After updating the nodejs version to v14.15.4, my issue is gone

+4
mittalvaibhav on Jan 26, 2021

Check your nodejs version (node -v) , I had v10.19.0, then made global update to v14.15.1,

checked and I was on 10.15.3

I then installed NVM (https://github.com/coreybutler/nvm-windows) and added node 14.15.1 and this issue is resolved for me. Though I have other ones now.

+4
CreateSean on Nov 19, 2020

It appears the issue is that the tailwindcss package installed under my node_modules (./node_modules/tailwindcss/node_modules) has the postcss package installed under it at version 7.0.32. I am assuming this serves as an override to my “root” postcss package which is installed at version 8.1.8. Removing node_modules/tailwindcss/node_modules/postcss solves the problem and my project now builds.

Perhaps someone here understands why tailwindcss is including that older postcss dep into itself and how to permanently fix this? It looks to me like tailwindcss has "@fullhuman/postcss-purgecss": "^3.0.0" as a dependency and that in turn has a postcss v7 dependency which in turn overrides my global v8.

+4
seankndy on Nov 19, 2020

Anyone got Tailwind 2 working with Typescript & Vue Cli & Vue 3, heh?

+4
SimonPrague on Nov 19, 2020

I’m getting the same getProcessedPlugins is not a function error.

postcss 8.1.0 postcss-import 13.0.0 postcss-loader 4.1.0 webpack 5.9.0 tailwindcss 2.0.1 node 14.15.1

postcss config

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

tailwind config

module.exports = {
  purge: ['./src/client/**/*.jsx'],
  theme: {
    extend: {
      colors: {
        primary: '#f9a825',
        secondary: '#eeeeee',
      },
    },
  },
};

When I remove tailwind from the postcss plugins, everything compiles fine (CSS is broken of course)

Downgrading to the compat version of tailwind works; however, why should I need to use compat? The docs say if the plugins being used work with postcss 8 then the compat version is unnecessary. The other plugins I’m using work just fine with postcss 8 when tailwind is removed. It’s only when tailwind is added that it breaks.

+3
mattrunyon on Dec 1, 2020

@SimonPrague Just spent 20 minutes recreating your project manually, the issue in your config is presets: [] in your tailwind.config.js file. You are telling Tailwind to disable the default config which causes things to blow up when you don’t provide everything it’s expecting manually. We can make this fail more gracefully for sure but this gets your project to build fine:

  // tailwind.config.js
  module.exports = {
    // ...
-   presets: []
    // ...
  }

Thanks for this… I was also tearing my hair out with this one. I generated a default config when upgrading to Tailwind2 and this line was in there. Commenting it out fixed everything. Is there a chance this should be commented out by default when creating a new config? I don’t really know, but wanted to ask the question at least. Thanks again for the help.

+3
jdhaines on Nov 24, 2020

Had the same problem, used the compat build (uninstall, then install compat), got this getProcessedPlugins error, then updated node to stable, now I’m getting:

ERROR in ./resources/css/app.css Module build failed (from ./node_modules/css-loader/index.js): ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js): TypeError: value.charCodeAt is not a function

+3
dinoluck on Nov 21, 2020

@SimonPrague Just spent 20 minutes recreating your project manually, the issue in your config is presets: [] in your tailwind.config.js file. You are telling Tailwind to disable the default config which causes things to blow up when you don’t provide everything it’s expecting manually. We can make this fail more gracefully for sure but this gets your project to build fine:

  // tailwind.config.js
  module.exports = {
    // ...
-   presets: []
    // ...
  }

This solutions works on my Next.js project! Thanks

This worked for me as well!

+2
mpakaris on Jun 22, 2021

In case someone bumps into this when deploying to Netlify (just when you thought everything was perfect locally…) you can add a .node-version file to your site root and just specify 14 as the version. That makes it build and deploy ok on Netlify.

+2
jlooper on Jan 10, 2021

i solve this issue update to my node version 14

+2
brahmendernchary on Dec 9, 2020

Had the same problem and updated node to stable version: https://medium.com/macoclock/update-your-node-js-on-your-mac-in-2020-948948c1ffb2

Everything worked after that

+2
Hesesses on Nov 21, 2020

I don’t know if this is related…

I’m running NextJS I had similar issues for hours (getProcessedPlugins and tailwindcss/plugins). Following some advice in this thread, I started from a clean config which compiled. I started incrementally adding my config back until I ended up with my old config. But it now works / compiles.

It sounds like something is cached somewhere.

+2
LawJolla on Nov 19, 2020

@SimonPrague Just spent 20 minutes recreating your project manually, the issue in your config is presets: [] in your tailwind.config.js file. You are telling Tailwind to disable the default config which causes things to blow up when you don’t provide everything it’s expecting manually. We can make this fail more gracefully for sure but this gets your project to build fine:

  // tailwind.config.js
  module.exports = {
    // ...
-   presets: []
    // ...
  }

Actually that

-   presets: []

Is included when run command npx tailwindcss init --full. And this is from the team, I supposed? Btw the fix worked for me, thank you very much

+1
coolcorexix on Aug 4, 2021

A problem I had was that I had properties under variants that should have been under variants.extend. Also, some properties were no longer valid there and had to be moved to theme.extend. Hope that helps someone else.

+1
patoncrispy on Jun 19, 2021

in my case, updating node version to v14.7.0 from v10.22.0 fixed the error in Next.js app. thanks to https://github.com/tailwindlabs/tailwindcss/issues/2810#issuecomment-730657685

+1
shuzootani on Jan 29, 2021

solved by upgrading node to LST version

+1
jiangyh1024 on Dec 14, 2020

This error went away for me when I switched from node 10 to 12 (fwiw the docs say that node 10 will not work). Hopefully that helps someone.

+1
needcaffeine on Nov 24, 2020

Sorry for the hassle here folks, the latest instructions on the website should resolve these issues:

https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

If you’re using the typography plugin you’ll want to read the release notes there as well:

https://github.com/tailwindlabs/tailwindcss-typography/releases/tag/v0.3.0

If anyone is still running into issues with these updates feel free to open a new issue.

@adamwathan I’m sorry. I followed all the instructions and it still fails. I tried so many different things (not just everything above) but this is not a solution yet. I think this issue should not yet be closed. Look at me error below from the compat build:

error  in ./src/components/profile/widgets/***.vue?vue&type=style&index=0&id=3f11713c&scoped=true&lang=postcss
Module build failed (from ./node_modules/.pnpm/postcss-loader@3.0.0/node_modules/postcss-loader/src/index.js):
TypeError: getProcessedPlugins is not a function
    at /home/***/client/node_modules/.pnpm/@tailwindcss/postcss7-compat@2.0.1/node_modules/@tailwindcss/postcss7-compat/lib/processTailwindFeatures.js:71:83
    at LazyResult.run (/home/***/client/node_modules/.pnpm/postcss@7.0.35/node_modules/postcss/lib/lazy-result.js:288:14)
    at LazyResult.asyncTick (/home/***/client/node_modules/.pnpm/postcss@7.0.35/node_modules/postcss/lib/lazy-result.js:212:26)
    at LazyResult.asyncTick (/home/***/client/node_modules/.pnpm/postcss@7.0.35/node_modules/postcss/lib/lazy-result.js:225:14)
    at /home/***/client/node_modules/.pnpm/postcss@7.0.35/node_modules/postcss/lib/lazy-result.js:254:14
    at new Promise (<anonymous>)
    at LazyResult.async (/home/***/client/node_modules/.pnpm/postcss@7.0.35/node_modules/postcss/lib/lazy-result.js:250:23)
    at LazyResult.then (/home/***/client/node_modules/.pnpm/postcss@7.0.35/node_modules/postcss/lib/lazy-result.js:131:17)
    at /home/***/client/node_modules/.pnpm/postcss-loader@3.0.0/node_modules/postcss-loader/src/index.js:142:8

This error shows up about 20 times in a row. And there is also one more error:

 error  in ./src/assets/tailwind.css

Module build failed (from ./node_modules/.pnpm/postcss-loader@3.0.0/node_modules/postcss-loader/src/index.js):
TypeError: Cannot convert undefined or null to object
    at Function.entries (<anonymous>)
    at flattenColorPalette (/home/***/client/node_modules/.pnpm/@tailwindcss/postcss7-compat@2.0.1/node_modules/@tailwindcss/postcss7-compat/lib/util/flattenColorPalette.js:8:67)
    at /home/***/client/node_modules/.pnpm/@tailwindcss/postcss7-compat@2.0.1/node_modules/@tailwindcss/postcss7-compat/lib/plugins/divideColor.js:27:53
    at /home/***/client/node_modules/.pnpm/@tailwindcss/postcss7-compat@2.0.1/node_modules/@tailwindcss/postcss7-compat/lib/util/processPlugins.js:69:5
    at Array.forEach (<anonymous>)
    at _default (/home/***/client/node_modules/.pnpm/@tailwindcss/postcss7-compat@2.0.1/node_modules/@tailwindcss/postcss7-compat/lib/util/processPlugins.js:63:11)
    at /home/***/client/node_modules/.pnpm/@tailwindcss/postcss7-compat@2.0.1/node_modules/@tailwindcss/postcss7-compat/lib/processTailwindFeatures.js:60:54
    at LazyResult.run (/home/***/client/node_modules/.pnpm/postcss@7.0.35/node_modules/postcss/lib/lazy-result.js:288:14)
    at LazyResult.asyncTick (/home/***/client/node_modules/.pnpm/postcss@7.0.35/node_modules/postcss/lib/lazy-result.js:212:26)
    at LazyResult.asyncTick (/home/***/client/node_modules/.pnpm/postcss@7.0.35/node_modules/postcss/lib/lazy-result.js:225:14)
    at /home/***/client/node_modules/.pnpm/postcss@7.0.35/node_modules/postcss/lib/lazy-result.js:254:14
    at new Promise (<anonymous>)
    at LazyResult.async (/home/***/client/node_modules/.pnpm/postcss@7.0.35/node_modules/postcss/lib/lazy-result.js:250:23)
    at LazyResult.then (/home/***/client/node_modules/.pnpm/postcss@7.0.35/node_modules/postcss/lib/lazy-result.js:131:17)
    at /home/***/client/node_modules/.pnpm/postcss-loader@3.0.0/node_modules/postcss-loader/src/index.js:142:8

 @ ./src/assets/tailwind.css 4:14-257 14:3-18:5 15:22-265
 @ ./src/main.ts
 @ multi ./node_modules/.pnpm/webpack-dev-server@3.11.0_webpack@4.44.2/node_modules/webpack-dev-server/client?http://192.168.0.52:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

This is my tailwind config:

const defaultTheme = require('tailwindcss/defaultTheme')
const colors = require('tailwindcss/colors')
module.exports = {
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    preserveHtmlElements: process.env.NODE_ENV !== 'production',
    content: [
      './public/**/*.html',
      './src/**/*.vue',
    ],
    options: {
      defaultExtractor(content) {
        const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '')
        return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[.A-Za-z0-9-_/]+/g) || []
      },
      safelist: {
        standard: [/-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/, /data-v-.*/],
      },
    }
  },
  variants: {
    maxWidth: ['responsive'],
    borderStyle: ['responsive', 'hover', 'focus'],
    borderColor: ['responsive', 'hover', 'focus', 'active'],
    zIndex: ['responsive', 'hover', 'focus'],
  },
  presets: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      black: colors.black,
      white: colors.white,
      "cool-gray": colors.coolGray,
      gray: colors.gray,
      red: colors.red,
      yellow: colors.amber,
      green: colors.emerald,
      blue: colors.blue,
      indigo: colors.indigo,
      purple: colors.violet,
      pink: colors.pink,
    },
    extend: {
      zIndex: {
        '50': 50,
        '60': 60,
        '70': 70,
        '80': 80,
        '90': 90,
        '100': 100,
      },
      inset: {
        '-px': '-1px',
        '-0': '-0',
        '-1': '-0.25rem',
        '-2': '-0.5rem',
        '-3': '-0.75rem',
        '-4': '-1rem',
        '-5': '-1.25rem',
        '-6': '-1.5rem',
        '-8': '-2rem',
        '-10': '-2.5rem',
        '-12': '-3rem',
        '-16': '-4rem',
      },
      height: {
        '1/4': '25%',
        '3/4': '75%',
        '1/2': '50%',
        '1/3': '33.3%',
        '2/3': '66.6%',
        '1/5': '20%',
        '2/5': '40%',
        '3/5': '60%',
        '4/5': '80%',
      },
      minHeight: {
        px: '1px',
        '0': '0',
        '1': '0.25rem',
        '2': '0.5rem',
        '3': '0.75rem',
        '4': '1rem',
        '5': '1.25rem',
        '6': '1.5rem',
        '8': '2rem',
        '10': '2.5rem',
        '12': '3rem',
        '16': '4rem',
        xs: '20rem',
        sm: '24rem',
        md: '28rem',
        lg: '32rem',
        xl: '36rem',
        '2xl': '42rem',
        '3xl': '48rem',
        '4xl': '56rem',
        '5xl': '64rem',
        '6xl': '72rem',

        '1/4': '25%',
        '3/4': '75%',
        '1/2': '50%',
        '1/3': '33.3%',
        '2/3': '66.6%',
        '1/5': '20%',
        '2/5': '40%',
        '3/5': '60%',
        '4/5': '80%',
      },
      minWidth: {
        '12': '3rem',
        '1/4': '25%',
        '3/4': '75%',
        '1/2': '50%',
        '1/3': '33.3%',
        '2/3': '66.6%',
        '1/5': '20%',
        '2/5': '40%',
        '3/5': '60%',
        '4/5': '80%',
      },
      maxWidth: {
        '1/4': '25%',
        '3/4': '75%',
        '1/2': '50%',
        '1/3': '33.3%',
        '2/3': '66.6%',
        '1/5': '20%',
        '2/5': '40%',
        '3/5': '60%',
        '4/5': '80%',
      },
      screens: {
        'sm-h': { 'raw': '(min-height: 360px)' },
        'md-h': { 'raw': '(min-height: 720px)' },
        'gh-d': { 'raw': '(min-height: 1080px)' },
        'xl-h': { 'raw': '(min-height: 1280px)' },
      },
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    }
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
}

and my tailwind css:

@import 'tailwindcss/base';

@import './general.pcss';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';

I’m using Vue 3, Vue CLI, TypesCript, PNPM.

Any help greatly appreciated as this currently broke the whole project.

+1
SimonPrague on Nov 22, 2020

@ThreeScreenStudios thank you! I tried the compat packages early on and it was failing to build still as others have said as well, but I followed your procedure of removing and re-installing and I’m green again. Thank you.

+1
seankndy on Nov 20, 2020

Can anyone clone https://github.com/seankndy/tailwindcss2-break and try npm install + npm run dev and tell me if it works for them and if so what versions they’re running? It does not work on either of my machines.

I am already on the latest stable version of node and I cannot get the project to build without removing postcss v7 from tailwind’s inner dependencies.

Also what’s interesting is when I created the tailwindcss2-break project and started adding node packages and re-building iteratively I was never able to get it to fail. But somewhere along the way I decided to nuke node_modules and let it rebuild from scratch and that is when it broke. So I believe it is some sort of dependency graph issue that’s a bit of a moving target to trigger and reproduce.

I was able to reproduce the issue by cloning your repo - however I think the issue is that you are not using the compat build of tailwind.

I performed npm remove tailwindcss and npm remove postcss followed by npm install tailwindcss@npm:@tailwindcss/postcss7-compat and the project ran after that.

+1
ThreeScreenStudios on Nov 20, 2020

Whatever I do, I get a TypeError: getProcessedPlugins is not a function.

+1
IgorNoskov on Nov 19, 2020

Ok I’ve added alias for cool-gray and I’m back to the TypeError: getProcessedPlugins is not a function and even with the compat build 😦

+1
SimonPrague on Nov 19, 2020
Read more comments on GitHub
← tailwindcss: TypeError: Cannot read properties of undefined (reading '700')
tailwindcss: TypeError: Invalid PostCSS Plugin found at: plugins[1] →