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

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

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

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

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

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.

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.

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

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

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

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

@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?

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

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

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!

@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 😦