TypeError: Invalid PostCSS Plugin found at: plugins[1]

[michalhudecek]

Describe the problem:

I am following this Upgrade guide.

After running npm install tailwindcss@latest postcss@latest autoprefixer@latest, I start getting this error when running npm run serve:

TypeError: Invalid PostCSS Plugin found at: plugins[1]

I am using:

• postcss@8.1.7
• autoprefixer@10.0.2
• tailwindcss@2.0.1

Link to a minimal reproduction:

Not sure how to reproduce this on other machines. I am on Windows 10, node v14.15.1.

[tance77]

I had a similar issue. If you are using a postcss-loader you should also update that as well. Seemed to work for me after that.

npm i postcss-loader@latest

[OlliePrentice]

Having a similar issue on Mac 10.15.7. Tried with stable node and latest v15.2.1

Error: [object Object] is not a PostCSS plugin

[JoseLAmador]

@michalhudecek try with:
npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@compat postcss@^7 autoprefixer@^9

[richardkmiller]

Thanks Tailwind team for the 2.0 release! 🚀🎉

FYI, I was also getting TypeError: Invalid PostCSS Plugin found at: plugins[2].

Then I ran:

yarn remove tailwindcss
yarn add tailwindcss@compat postcss@^7 autoprefixer@^9

Now I'm getting: TypeError: value.charCodeAt is not a function

Versions:

• tailwindcss 2.0.1-compat
• postcss 7.0.35
• autoprefixer 9.8.6
• node 15.2.1
• This is a Rails 6.0 app with webpacker 5.2.1
• macOS 11.0.1

Here's the stack trace:
tailwind_2795.txt

[michalhudecek]

@michalhudecek try with:
npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@compat postcss@^7 autoprefixer@^9

Yes, I tried that. It didn't help.

[MultiTijmes]

Same here.
I'm using vue-cli (v3 or v4 both have the error).
TypeError: value.charCodeAt is not a function
Upgrading postcss-loader doesn't help,
It breaks at @tailwind base;, changing that to @import "tailwindcss/base"; has no effect.
Thanks Tailwind, looking forward to using v2.

[ghost]

Try this format fir postcss config:

Instead of going with array format for plugins, use object format. It worked for me in similar use case with nextjs framwork. Might work here too.

[tolawho]

@richardkmiller @MultiTijmes just comment this line @import "tailwindcss/components"; in app.css to fix TypeError: value.charCodeAt is not a function

[richardkmiller]

just comment this line @import "tailwindcss/components"; in app.css to fix TypeError: value.charCodeAt is not a function

Thanks @tolawho! That fixed it for me. I didn't know what I'd be missing without tailwindcss/components but it's explained below. It's only the .container class. I can live without that until a fix comes along.

tailwindlabs/discuss#397

[MultiTijmes]

Thanks guys. It works for me now, including the tailwind/components. Sorry to say that I can't pinpoint the exact fix anymore, I tried a LOT of things yesterday. Upgraded vue-cli to v4, ran a new scaffold, re-implemented all my settings, tried installing tw2 the new way (postccs8), tried it the alternative way (2.0.1-compat), tried with @import vs @tailwind vs import through js.
Some where along the way I got it work.
Now I have these tailwindcss@compat postcss@^7 autoprefixer@^9 and the @tailwind imports in main.css.

[lmeijdam]

@michalhudecek try with:
npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@compat postcss@^7 autoprefixer@^9

I've tried this in a new angular application and it worked for me

[michalhudecek]

@michalhudecek try with:
npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@compat postcss@^7 autoprefixer@^9

Yes, I tried that. It didn't help.

I already wrote that it doesn't help :(

[Negan1911]

For anyone seeing the error TypeError: value.charCodeAt is not a function, take a look to see if you're not making the same mistake that I did: #2835

[MultiTijmes]

Yes, what @Negan1911 says seems applicable to my case. After resetting everything I didn't put that plugin back in; and that could very well be the reason it finally worked for me. Thx!

[alessandrostein]

@michalhudecek try with:
npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@compat postcss@^7 autoprefixer@^9

This works for me, but after that, I got this error when compiling FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

My setup:

Rails 6
Node v14.9.0
Yarn 1.22.5

tailwind.config.js

const { colors } = require("tailwindcss/defaultTheme");

module.exports = {
  important: true,
  plugins: [], // eslint-disable-line no-undef
  theme: {
    fontFamily: {
      sans: [
        "Nunito",
        "-apple-system",
        "BlinkMacSystemFont",
        '"Segoe UI"',
        "Roboto",
        '"Helvetica Neue"',
        "Arial",
        '"Noto Sans"',
        "sans-serif",
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"',
        '"Noto Color Emoji"',
      ],
      serif: [
        "Constantia",
        "Lucida Bright",
        "Lucidabright",
        "Lucida Serif",
        "Lucida",
        "DejaVu Serif",
        "Bitstream Vera Serif",
        "Liberation Serif",
        "Georgia",
        "serif",
      ],
      mono: [
        "Menlo",
        "Monaco",
        "Consolas",
        "Liberation Mono",
        "Courier New",
        "monospace",
      ],
    },
    extend: {
      margin: {
        "96": "24rem",
        "128": "32rem",
      },
      boxShadow: {
        xl: "0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)",
      },
      screens: {
        sm: "640px",
        md: "786px",
        lg: "1024px",
        xl: "1280px",
        print: {
          raw: "print",
        },
      },
      maxWidth: {
        xs: "20rem",
        sm: "30rem",
        md: "40rem",
        lg: "50rem",
        xl: "60.5rem",
        "2xl": "70rem",
        "3xl": "80rem",
        "4xl": "90rem",
        "5xl": "100rem",
        full: "100%",
      },
      colors: {
        gray: {
          100: "#F6F6F6",
          200: "#eeeeee",
          300: "#e0e0e0",
          400: "#bdbdbd",
          500: "#9e9e9e",
          600: "#757575",
          700: "#616161",
          800: "#424242",
          900: "#212121",
        },
        green: {
          ...colors.green,
          500: "#1ECE81",
        },
      },
    },
  },
  variants: {
    opacity: ["responsive", "hover"],
  },
  purge: {
    mode: 'all',

    content: [
      './app/**/*.html.erb',
      './app/helpers/**/*.rb',
      './app/frontend/**/*.js',
    ],
  },
};

postcss.config.js

module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer"),
    require("postcss-import"),
    require("postcss-flexbugs-fixes"),
    require("postcss-preset-env")({
      autoprefixer: {
        flexbox: "no-2009"
      },
      stage: 3
    }),
  ]
};

To compiling, I am using webpacker ./bin/webpack-dev-server --max_old_space_size 4096

Any help?

[richardkmiller]

@Negan1911 That worked for me. After removing the tailwindcss/ui plugin, I was able to add back @import "~tailwindcss/components"; and everything is working fine now. Thanks!

It looks like the overall solution is to be sure you've removed the tailwindcss/ui plugin when upgrading to Tailwind 2.0, and this issue can probably be closed.

[richardkmiller]

Hi @alessandrostein your issue sounds separate, but it seems like you're running out of memory? What if you remove --max_old_space_size 4096? See https://stackoverflow.com/a/48392705/41820.

[jbbarth]

@richardkmiller unfortunately I have the original issue and I don't use the tailwindcss/ui plugin. So there's probably a broader issue here.

[tance77]

Unrelated to your issue @jbbarth but @tailwindcss/ui has been implemented into tailwindcss
Changes can be found here.
https://tailwindui.com/changes-for-v2

[jbbarth]

@tance77 ah ok, thanks for the pointer!

On my setup it seems the problem was due to autoprefixer 10. I had a hint with this article and indeed, downgrading autoprefixer to the latest 9.x (9.8.6) did the trick.

[rekkisomo]

I've updated everything and removed Tailwind UI, which fixed the issue of charCodeAt and plugin errors, however it seems that v2 constantly throws Error: Unexpected '/'. Escaping special characters with \ may help. when importing, however only downgrading TailwindCSS to 1.9.4 works fine.

[gomorizsolt]

FWIW, I'd been facing with the same error but installing the PostCSS 7 compatibility build worked for me (likewise @JoseLAmador suggested above).

[MultiTijmes]

A follow-up from my situation: although I got it to work with tailwindcss@compat, my dev-server started to behave real slow.
A page reload could take up to 10 sec!
Hot reload took very long too and the browsers (Chrome / Firefox) were having a hard time and crashed every now and then.
Downgrading back to tailwind 1.9.6 seems to improve the performance significantly.
Too bad, I guess I will have to wait for vue-cli to upgrade postcss before I can use Tailwind 2 in my setup.
So. apparently the compat doesn't seem to work very optimally in my situation.

[mudssrali]

@tance77 ah ok, thanks for the pointer!

On my setup it seems the problem was due to autoprefixer 10. I had a hint with this article and indeed, downgrading autoprefixer to the latest 9.x (9.8.6) did the trick.

I don't know why but everything latest in one project working fine. But upgrading tailwindcss in an other project, not working at all. Same Inavalid Plugin issue :-\

[mudssrali]

There is problem with autofixer:10.0.4. I downgraded to autoprefixer:10.0.2 working fine for me.

[adamwathan]

Closing, solution to original problem is to install the compatibility build: https://tailwindcss.com/docs/installation#post-css-7-compatibility-build