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

Question

I cloned this repo https://github.com/tailwindcss/setup-examples/tree/master/examples/nextjs then I updated tailwind.config.js

  theme: {
    extend: {
      color: {
        primary: "#730000",
        secondry: "#efefef",
      },
    },
  },
  variants: {},
  plugins: [],
};

then run the command postcss css/tailwind.css -o generated.css terminal throws an error TypeError: Invalid PostCSS Plugin found at: plugins[0] can anyone please help me to fix it. Thank you.

Repetend

did you find any solution? – Courland

No, then I switched to another solution if you want I can create a quick repo for u. Still, there is a problem compiler does not watch the changes. – Repetend

hey, i guess i found the solution, could you please update the question and also provide your postcss.config.js file content? – Courland

could u please share you solution? – Repetend

of course, ill write it as answer – Courland

Answer 1

changed this

module.exports = {
  plugins: [
    "postcss-import",
    "tailwindcss",
    "autoprefixer",
  ]
};

to

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

solved the

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

Courland

this works for me, but then production build has all the CSS approximately 60000 lines – Repetend

yes, to solve it you must use purge css, it documented well here Tailwind-Nextjs-PurgeCSS – Courland

Answer 2

Same error, possibly different issue as OP

I had this issue when attempting to install Storybook alongside Tailwind and Nextjs. I was able to fix the error after adding "tailwindcss": {}, to my postcss.config.js.

To be clear, I have not and did not experience this issue as you did, without attempting to add storybook to the workflow.

My solution's working configuration files

Below are working configurations for postcss, tailwind, storybook, using defaults for Nextjs. I am using the standard create-next-app workflow and based on the --example with-storybook.

In particular, all of the files below are placed in my project root directory and I used storybook >= 6.0.0.

⚠️ See Next.js documentation, near the bottom in a note section, which highlights the need for object syntax in configuration files when adding non-Next.js tools, such as storybook.

postcss.config.js

module.exports = {
  plugins: {
    "tailwindcss": {},
    'postcss-flexbugs-fixes': {},
    'postcss-preset-env': {
      autoprefixer: {
        flexbox: 'no-2009',
      },
      stage: 3,
      features: {
        'custom-properties': false,
      },
    },
  },
}

tailwind.config.js

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true
  },
  purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        'accent-1': '#333',
      },
    },
  },
}

.storybook/main.js

module.exports = {
  stories: ['../stories/*.stories.@(ts|tsx|js|jsx|mdx)'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
}

.storybook/preview.js

import '../styles/index.css';

where index.css is as instructed via the Tailwindcss docs.

Rosauraroscius

Answer 3

Check the version of autoprefixer you have installed. It took me an hour or two to realize that autoprefixer version 10 is indeed causing breaking changes when used with nextjs+tailwindcss (specifically next's css-loader on my end). Rollback to [email protected] for the time being until these bugs are resolved. Also ensure you aren't using [email protected] if using yarn. Use [email protected] or [email protected]. The reason I mention it is because [email protected] automatically installs if no explicit version is targeted which clashes with yarn. Thankfully, [email protected] should be released as @9.5.4 soon and they'll begin work on @9.5.5-canary.x

Autoprefixer published version 10 approximately 5 days ago. They moved postcss to peerDependencies and moved to PostCSS 8. They also removed support for Node versions 6.x, 8.x, and 11.x. That said, [email protected] should do the trick.

I left a comment on an open issue in postcss/autoprefixer outlining the error I was getting on my end with regards to using version 10 with nextjs https://github.com/postcss/autoprefixer/issues/1359#issuecomment-695752807

Brummell

Answer 4

Try updating postcss-cli along with postcss, tailwindcss and autoprefixer to their latest versions.

npm i postcss-cli@latest

npm i tailwindcss@latest postcss@latest autoprefixer@latest

Worked for me in ReactJS - "^16.13.1"

postcss.config.js

module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer"),
  ],
};

Tiepolo

Answer 5

Updated postcss-cli (10.0.0v) and autoprefixer(10.4.8v) to the latest, then added require("postcss-import") in postcss.config.js file solved the issue for me.

1. npm i postcss-cli@latest autoprefixer@latest
2. postcss.config.js:

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

Leveille

Answer 6

This is working for me, thank you,

Updated postcss-cli (10.0.0v) and autoprefixer(10.4.8v) to the latest, then added require("postcss-import") in postcss.config.js file solved the issue for me.

1.NPM i postcss-cli@latest autoprefixer@latest 2.postcss.config.js:

Irremovable