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.

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]

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.