11

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.

mikemaccana
  • 110,530
  • 99
  • 389
  • 494
Prince Sodhi
  • 2,845
  • 2
  • 21
  • 35

5 Answers5

15

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]

Hasan Haghniya
  • 2,347
  • 4
  • 19
  • 29
  • this works for me, but then production build has all the CSS approximately 60000 lines – Prince Sodhi Apr 19 '20 at 09:01
  • yes, to solve it you must use `purge css`, it documented well here [Tailwind-Nextjs-PurgeCSS](https://github.com/tailwindcss/setup-examples/tree/master/examples/nextjs#setting-up-purgecss-optional) – Hasan Haghniya Apr 19 '20 at 12:25
7

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.

Phát
  • 29
  • 7
Jason R Stevens CFA
  • 2,232
  • 1
  • 22
  • 28
4

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 autoprefixer@9.8.6 for the time being until these bugs are resolved. Also ensure you aren't using next@9.5.3 if using yarn. Use next@9.5.2 or next@9.5.4-canary.20. The reason I mention it is because next@9.5.3 automatically installs if no explicit version is targeted which clashes with yarn. Thankfully, next@9.5.4-canary.20 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, autoprefixer@9.8.6 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

David Buck
  • 3,752
  • 35
  • 31
  • 35
Andrew Ross
  • 1,094
  • 7
  • 16
1

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"),
  ],
};
Phát
  • 29
  • 7
VertikaJain
  • 11
  • 1
0

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',
    }),
  ],
}
Royalty
  • 463
  • 1
  • 4
  • 10