Maximum call stack size exceeded

Discussed in https://github.com/tailwindlabs/tailwindcss/discussions/8578

<div type='discussions-op-text'>

^{Originally posted by jithureddy June 10, 2022} Hi, Please help

Just updated my project to latest "tailwindcss": "^3.1.1" and using create react app setup from here. It was working great with "tailwindcss": "^3.0.4".

tailwind.config.js - 

const deepMerge = require('deepmerge')
const formsPlugin = require('@tailwindcss/forms')
const { fontFamily } = require('tailwindcss/defaultTheme')
const colors = require('./colors')

const uiConfig = {
	content: [
		'node_modules/@mondra/ui-components/dist/index.js',
		'./src/**/*.{html,js,jsx,ts,tsx}',
	],
	theme: {
		colors,
		container: {
			padding: '2rem',
		},
		extend: {
			animation: {
				'fade-in': 'fade-in 200ms ease-in-out',
				overlay: 'overlay 200ms ease-in-out',
				'slide-down': 'slide-down 150ms ease-in',
			},
			boxShadow: {
				focus: '#ffffff 0px 0px 0px 0px, #6366f1 0px 0px 0px 2px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px',
			},
			gridColumn: {
				'span-13': 'span 13 / span 13',
				'span-14': 'span 14 / span 14',
				'span-15': 'span 15 / span 15',
				'span-16': 'span 16 / span 16',
				'span-17': 'span 17 / span 17',
				'span-18': 'span 18 / span 18',
				'span-19': 'span 19 / span 19',
				'span-20': 'span 20/ span 20',
			},
			height: {
				'app-header': '56px',
				'brand-logo': '150px',
				'card-header': '56px',
			},
			keyframes: {
				'fade-in': {
					'0%': {
						opacity: 0,
					},
					'100%': { opacity: 1 },
				},
				overlay: {
					'0%': {
						opacity: 0,
					},
					'100%': { opacity: 0.75 },
				},
				'slide-down': {
					'0%': {
						opacity: 0,
						transform: 'translateY(-10px)',
					},
					'100%': { opacity: 1, transform: 'translateY(0)' },
				},
			},
			maxHeight: {
				'dropdown-list': '40vh',
				'scroll-height': 'calc(100vh - 56px)',
			},
			maxWidth: {
				'company-selection': '150px',
				'sidebar-close': '80px',
				'sidebar-open': '256px',
			},
			minHeight: {
				button: '32px',
				'scroll-height': 'calc(100vh - 56px)',
			},
			minWidth: {
				12: '48px',
				'sidebar-close': '80px',
				'sidebar-open': '256px',
			},
			opacity: {
				80: '0.8',
			},
			screens: {
				xxl: { min: '1600px' },
			},
			spacing: {
				14: '3.5rem',
			},
			width: {
				31: '6rem',
				'brand-logo': '180px',
				'fit-content': 'fit-content',
				'sidebar-close': '80px',
				'sidebar-open': '256px',
			},
			zIndex: {
				'-1': -1,
				dialog: 9999,
				px: 1,
				slideover: 60,
				toast: 10000,
			},
		},
		fontFamily: {
			inter: ['Inter', ...fontFamily.sans],
		},
	},
	plugins: [formsPlugin],
}

function arrayMergeFn(destinationArray, sourceArray) {
	return destinationArray.concat(sourceArray).reduce((acc, cur) => {
		if (acc.includes(cur)) return acc
		return [...acc, cur]
	}, [])
}

/**
 * Merge UI components config and Tailwind CSS configurations
 * @param {object} tailwindConfig - Tailwind config object
 * @return {object} new config object
 */
function wrapper(tailwindConfig) {
	return deepMerge({ ...tailwindConfig }, uiConfig, {
		arrayMerge: arrayMergeFn,
	})
}

module.exports = wrapper

</div>

[spdiswal]

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

[RobinMalfait]

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 👍