Loading `@tailwindcss/forms` seems to cause a PostCSS error (next.js)

[christofferbergj]

Repo: https://github.com/christofferberg/jit/tree/main/

I've tried to setup Tailwind JIT in a Nextjs project and everything seems to work fine, until I require @tailwindcss/forms in the plugins array of the tailwind.config.js file.

Error:

Unknown error from PostCSS plugin. Your current PostCSS version is 8.1.7, but postcss-preset-env uses 7.0.35. Perhaps this is the source of the error below.
error - ./styles/globals.css ((webpack)/css-loader/cjs.js??ref--5-oneOf-6-1!(webpack)/postcss-loader/cjs.js??ref--5-oneOf-6-2!./styles/globals.css)
RangeError: Maximum call stack size exceeded
    at Function.keys (<anonymous>)

tailwind.config.js:

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require("@tailwindcss/forms"), // Loading this creates error: Unknown error from PostCSS plugin. Your current PostCSS version is 8.1.7, but postcss-preset-env uses 7.0.35. Perhaps this is the source of the error below.
    require("@tailwindcss/typography"),
    require("tailwindcss-debug-screens"),
  ],
};

postcss.config.js

module.exports = {
  plugins: [
    "@tailwindcss/jit",
    "postcss-nesting",
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        autoprefixer: {
          flexbox: "no-2009",
        },
        stage: 3,
        features: {
          "custom-properties": false,
        },
      },
    ],
  ],
};

[sinnbeck]

Isnt this just post-preset-env that hasn't been updated to postcss 8 yet?

csstools/postcss-preset-env#191

[calebmer]

I’m also seeing this error. Removing postcss-preset-env does fix the error for me, but when I replace it with just autoprefixer the error comes back:

error - ./client/styles/tailwind.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ref--5-oneOf-6-2!./client/styles/tailwind.css)
RangeError: Maximum call stack size exceeded
    at Function.keys (<anonymous>)

This time without the postcss-preset-env error message.

Removing @tailwindcss/forms does not fix the error for me.

[adamwathan]

Hey! This is the same issue as here ultimately:

#29

It's a bug somewhere that is resolved by updating to the latest version of autoprefixer. The issue is postcss-preset-env bundles autoprefixer internally, and postcss-preset-env is on old versions of everything.

I would recommend not using postcss-preset-env for now until it is updated (if it is), and instead just pulling in any PostCSS plugins you need independently so you can control which version is used more easily.