tailwindcss: Maximum call stack size exceeded

Hi, I managed to trigger the same kind of error in this repository: https://github.com/spdiswal/tailwindcss-8582

@spdiswal Hey! So in your case at least that’s an infinite recursion problem and is expected: https://play.tailwindcss.com/1fABzspiRr?file=config — this particular case was an issue in 3.0.24 as well. The fact that it fails on the regex line in your case is, I think, likely a coincidence. It’s running into a case of too many recursive function calls.

The problem is that the top-level theme.colors key is defined as a function and inside it the theme is called which looks into the colors object which calls the function when uses the theme function… and repeat to infinity. This is an issue even when using theme.extend.colors.

In your case you probably want to use the provided colors object which references the default color palette:

    colors: ({ colors }) => ({
      foreground: colors.sky['500'],
    }),

Alternatively, if you must use the theme function, you can add your colors to textColor / backgroundColor / etc…:

    textColor: ({ theme }) => ({
      foreground: theme('colors.sky.500'),
    }),

For me the issue persisted even with 3.1.4 and removing js from the file patterns in tailwind.config.js (see below) fixed it.

# tailwind.config.js
module.exports = {
    content: ["./index.html", "./src/**/*.{vue,js,ts}",],
    theme: {
        extend: {},
    },
    plugins: [
        require('@tailwindcss/forms'),
    ],
}

This suggested that maybe node_modules or some folder with lots of .js files is being dragged in as mentioned above, and while I didn’t have node_modules, I did vendor another library that had a handful of very large .js files. Not sure why this was not a problem before, but I’ve solved it with more strict globs as mentioned here: https://github.com/tailwindlabs/tailwindcss/issues/8477.

Hey! Thanks for the reproduction @nam-tran-tego that was exactly the problem!

This should be fixed by #8636, and will be available in the next release (probably later today).

You can already try it by using the insiders build npm install tailwindcss@insiders.

@jithureddy thanks, let’s keep the conversation about storybook in its own issue 👍

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch tailwindcss@3.1.2 for the project I’m working on.

My problem:

Facing RangeError: Maximum call stack size exceeded after some updating in code base.

Root cause: using push with too many arguments. https://stackoverflow.com/questions/42263108/why-does-apply-with-too-many-arguments-throw-maximum-call-stack-size-exceeded

Here is the diff that solved my problem:

diff --git a/node_modules/tailwindcss/lib/lib/defaultExtractor.js b/node_modules/tailwindcss/lib/lib/defaultExtractor.js
index ecb0617..b95200a 100644
--- a/node_modules/tailwindcss/lib/lib/defaultExtractor.js
+++ b/node_modules/tailwindcss/lib/lib/defaultExtractor.js
@@ -52,7 +52,7 @@ function defaultExtractor(context) {
         /** @type {(string|string)[]} */ let results = [];
         for (let pattern of patterns){
             var ref;
-            results.push(...(ref = content.match(pattern)) !== null && ref !== void 0 ? ref : []);
+            results = [...results, ...(ref = content.match(pattern)) !== null && ref !== void 0 ? ref : []];
         }
         return results.filter((v)=>v !== undefined).map(clipAtBalancedParens);
     };

This issue body was partially generated by patch-package.