[bug]: shadcn fails to properly parse tailwind.config.ts

[Mike-Zamora-Lendbuzz]

Describe the bug

Our tailwind.config.ts is using the tailwind supported callback pattern for referencing styles. After running npx shadcn@latest add accordion the command fails with the logs below.

Even after removing the problem lines from the error log the tailwind.config.ts is transformed to a bad state and is malformed. Note that this happens when adding any component.

See here for the tailwind config callback pattern https://v3.tailwindcss.com/docs/theme#referencing-other-values

Example tailwind.config.ts Before

import plugin from 'tailwindcss/plugin'
import { generateTailwindColors } from './src/util/colors.util'
import NumericalValuesJson from './src/design-tokens/numerical-tokens.json'

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{html,jsx,tsx,ts,js}',
    './src/components/**/*.{html,jsx,tsx,js,ts}',
  ],
  darkMode: ['media', 'class'],
  safelist: [
    {
      pattern: /(grid-cols|gap)-[0-9]{1,2}|/,
      variants: ['xs', 'sm', 'lg', 'xl'],
    },
  ],
  theme: {
    colors: {
      ...generateTailwindColors('color'),
      ...generateTailwindColors('token'),
      transparent: 'transparent',
      current: 'currentColor',
    },
    fontFamily: {
      body: ['var(--font-rubik, Rubik)', 'sans-serif'],
      inter: ['var(--font-inter, Inter)', 'sans-serif'],
      heading: ['var(--font-lora, Lora)', 'serif'],
      mono: ['JetBrains Mono', 'mono'],
    },
    textColor: ({ theme }) => ({
      ...theme('colors'),
      ...generateTailwindColors('text'),
    }),
    borderColor: ({ theme }) => ({
      ...theme('colors'),
      ...generateTailwindColors('border'),
      DEFAULT: theme('colors.gray-200', 'currentColor'),
    }),
    backgroundColor: ({ theme }) => ({
      ...theme('colors'),
      ...generateTailwindColors('bg'),
    }),
    sizing: {
      ...NumericalValuesJson['sizing'],
    },
    extend: {
      spacing: {
        ...NumericalValuesJson['spacing'],
      },
      dropShadow: {
        lb: '0px 0px 50px 0px rgb(0 0 0 / 7%)',
      },

      gridTemplateColumns: {
        // Simple 16 column grid
        '13': 'repeat(13, minmax(0, 1fr))',
      },
      fontSize: {
        '2xs': '.625rem',
      },

      screens: {
        xs: { max: '639px' },
      },

      // ------ Start: Shadcn injected config ------
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
      colors: {
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))',
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))',
        },
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))',
        },
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        chart: {
          '1': 'hsl(var(--chart-1))',
          '2': 'hsl(var(--chart-2))',
          '3': 'hsl(var(--chart-3))',
          '4': 'hsl(var(--chart-4))',
          '5': 'hsl(var(--chart-5))',
        },
      },
    },
    // ------ End: Shadcn injected config ------
  },
  variants: {
    extend: {},
  },
  plugins: [
    plugin(function ({ addVariant }) {
      addVariant('not-last', '&:not(:last-child)')
    }),
    // ------ Start: Shadcn injected config ------
    require('tailwindcss-animate'),
    // ------ End: Shadcn injected config ------
  ],
}

Example tailwind.config.ts After

import plugin from 'tailwindcss/plugin'
import { generateTailwindColors } from './src/util/colors.util'
import NumericalValuesJson from './src/design-tokens/numerical-tokens.json'

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{html,jsx,tsx,ts,js}',
    './src/components/**/*.{html,jsx,tsx,js,ts}',
  ],
  darkMode: ['media', 'class'],
  safelist: [
    {
      pattern: /(grid-cols|gap)-[0-9]{1,2}|/,
      variants: ['xs', 'sm', 'lg', 'xl'],
    },
  ],
  theme: {
  	colors: {
  		transparent: 'transparent',
  		current: 'currentColor'
  	},
  	fontFamily: {
  		body: [
  			'var(--font-rubik, Rubik)',
  			'sans-serif'
  		],
  		inter: [
  			'var(--font-inter, Inter)',
  			'sans-serif'
  		],
  		heading: [
  			'var(--font-lora, Lora)',
  			'serif'
  		],
  		mono: [
  			'JetBrains Mono',
  			'mono'
  		]
  	},
  	textColor: '({ theme }) => ({\n      \n    })',
  	borderColor: '({ theme }) => ({\n      \n      DEFAULT: theme('colors.gray-200', 'currentColor'),\n    })',
  	backgroundColor: '({ theme }) => ({\n    })',
  	sizing: {
  		'___NumericalValuesJson[sizing]: '...NumericalValuesJson['sizing']
  	},
  	extend: {
  		spacing: {
  			'___NumericalValuesJson[spacing]: '...NumericalValuesJson['spacing']
  		},
  		dropShadow: {
  			lb: '0px 0px 50px 0px rgb(0 0 0 / 7%)'
  		},
  		gridTemplateColumns: {
  			'13': 'repeat(13, minmax(0, 1fr))'
  		},
  		fontSize: {
  			'2xs': '.625rem'
  		},
  		screens: {
  			xs: {
  				max: '639px'
  			}
  		},
  		borderRadius: {
  			lg: 'var(--radius)',
  			md: 'calc(var(--radius) - 2px)',
  			sm: 'calc(var(--radius) - 4px)'
  		},
  		colors: {
  			background: 'hsl(var(--background))',
  			foreground: 'hsl(var(--foreground))',
  			card: {
  				DEFAULT: 'hsl(var(--card))',
  				foreground: 'hsl(var(--card-foreground))'
  			},
  			popover: {
  				DEFAULT: 'hsl(var(--popover))',
  				foreground: 'hsl(var(--popover-foreground))'
  			},
  			primary: {
  				DEFAULT: 'hsl(var(--primary))',
  				foreground: 'hsl(var(--primary-foreground))'
  			},
  			secondary: {
  				DEFAULT: 'hsl(var(--secondary))',
  				foreground: 'hsl(var(--secondary-foreground))'
  			},
  			muted: {
  				DEFAULT: 'hsl(var(--muted))',
  				foreground: 'hsl(var(--muted-foreground))'
  			},
  			accent: {
  				DEFAULT: 'hsl(var(--accent))',
  				foreground: 'hsl(var(--accent-foreground))'
  			},
  			destructive: {
  				DEFAULT: 'hsl(var(--destructive))',
  				foreground: 'hsl(var(--destructive-foreground))'
  			},
  			border: 'hsl(var(--border))',
  			input: 'hsl(var(--input))',
  			ring: 'hsl(var(--ring))',
  			chart: {
  				'1': 'hsl(var(--chart-1))',
  				'2': 'hsl(var(--chart-2))',
  				'3': 'hsl(var(--chart-3))',
  				'4': 'hsl(var(--chart-4))',
  				'5': 'hsl(var(--chart-5))'
  			}
  		},
  		keyframes: {
  			'accordion-down': {
  				from: {
  					height: '0'
  				},
  				to: {
  					height: 'var(--radix-accordion-content-height)'
  				}
  			},
  			'accordion-up': {
  				from: {
  					height: 'var(--radix-accordion-content-height)'
  				},
  				to: {
  					height: '0'
  				}
  			}
  		},
  		animation: {
  			'accordion-down': 'accordion-down 0.2s ease-out',
  			'accordion-up': 'accordion-up 0.2s ease-out'
  		}
  	}
  },
  variants: {
    extend: {},
  },
  plugins: [
    plugin(function ({ addVariant }) {
      addVariant('not-last', '&:not(:last-child)')
    }),
    // ------ Start: Shadcn injected config ------
    require('tailwindcss-animate'),
    // ------ End: Shadcn injected config ------
  ],
}

Affected component/components

Any

How to reproduce

1. run npx shadcn@latest add accordion
2. Open tailwind.config.ts and examine the updated config

Codesandbox/StackBlitz link

No response

Logs

npx shadcn@latest add accordion
Need to install the following packages:
shadcn@2.4.0-canary.17
Ok to proceed? (y) y
✔ Checking registry.
⠋ Updating tailwind.config.ts
Something went wrong. Please check the error below for more details.
If the problem persists, please open an issue on GitHub.

Manipulation error: A syntax error was inserted.

../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:20:39 - error TS1135: Argument expression expected.

20             ...generateTailwindColors(,
                                         ~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:21:47 - error TS1005: ',' expected.

21             '___generateTailwindColors(color)': '...generateTailwindColors('color')',
                                                 ~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:21:77 - error TS1005: ',' expected.

21             '___generateTailwindColors(color)': '...generateTailwindColors('color')',
                                                                               ~~~~~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:21:82 - error TS1005: ',' expected.

21             '___generateTailwindColors(color)': '...generateTailwindColors('color')',
                                                                                    ~~~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:22:39 - error TS1005: ',' expected.

22     '___generateTailwindColors(token)': '...generateTailwindColors('token')',
                                         ~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:22:69 - error TS1005: ',' expected.

22     '___generateTailwindColors(token)': '...generateTailwindColors('token')',
                                                                       ~~~~~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:22:74 - error TS1005: ',' expected.

22     '___generateTailwindColors(token)': '...generateTailwindColors('token')',
                                                                            ~~~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:23:16 - error TS1005: ',' expected.

23     transparent: 'transparent',
                  ~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:24:12 - error TS1005: ',' expected.

24     current: 'currentColor'
              ~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:25:4 - error TS1005: ',' expected.

25    },
      ~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:44:51 - error TS1005: ',' expected.

44    textColor: '({ theme }) => ({\n      ...theme('colors'),\n      ...generateTailwindColors('text'),\n    })',
                                                     ~~~~~~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:44:57 - error TS1005: ',' expected.

44    textColor: '({ theme }) => ({\n      ...theme('colors'),\n      ...generateTailwindColors('text'),\n    })',
                                                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:44:95 - error TS1005: ':' expected.

44    textColor: '({ theme }) => ({\n      ...theme('colors'),\n      ...generateTailwindColors('text'),\n    })',
                                                                                                 ~~~~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:44:99 - error TS1005: ',' expected.

44    textColor: '({ theme }) => ({\n      ...theme('colors'),\n      ...generateTailwindColors('text'),\n    })',
                                                                                                     ~~~~~~~~~~~~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:44:111 - error TS1005: ':' expected.

44    textColor: '({ theme }) => ({\n      ...theme('colors'),\n      ...generateTailwindColors('text'),\n    })',
                                                                                                                 ~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:45:53 - error TS1005: ',' expected.

45    borderColor: '({ theme }) => ({\n      ...theme('colors'),\n      ...generateTailwindColors('border'),\n      DEFAULT: theme('colors.gray-200', 'currentColor'),\n    })',
                                                       ~~~~~~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:45:59 - error TS1005: ',' expected.

45    borderColor: '({ theme }) => ({\n      ...theme('colors'),\n      ...generateTailwindColors('border'),\n      DEFAULT: theme('colors.gray-200', 'currentColor'),\n    })',
                                                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:45:97 - error TS1005: ':' expected.

45    borderColor: '({ theme }) => ({\n      ...theme('colors'),\n      ...generateTailwindColors('border'),\n      DEFAULT: theme('colors.gray-200', 'currentColor'),\n    })',
                                                                                                   ~~~~~~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:45:103 - error TS1005: ',' expected.

45    borderColor: '({ theme }) => ({\n      ...theme('colors'),\n      ...generateTailwindColors('border'),\n      DEFAULT: theme('colors.gray-200', 'currentColor'),\n    })',
                                                                                                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:45:130 - error TS1005: ':' expected.

45    borderColor: '({ theme }) => ({\n      ...theme('colors'),\n      ...generateTailwindColors('border'),\n      DEFAULT: theme('colors.gray-200', 'currentColor'),\n    })',
                                                                                                                                    ~~~~~~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:45:145 - error TS1005: ',' expected.

45    borderColor: '({ theme }) => ({\n      ...theme('colors'),\n      ...generateTailwindColors('border'),\n      DEFAULT: theme('colors.gray-200', 'currentColor'),\n    })',
                                                                                                                                                   ~~~~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:45:149 - error TS1005: ':' expected.

45    borderColor: '({ theme }) => ({\n      ...theme('colors'),\n      ...generateTailwindColors('border'),\n      DEFAULT: theme('colors.gray-200', 'currentColor'),\n    })',
                                                                                                                                                       ~~~~~~~~~~~~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:45:161 - error TS1005: ',' expected.

45    borderColor: '({ theme }) => ({\n      ...theme('colors'),\n      ...generateTailwindColors('border'),\n      DEFAULT: theme('colors.gray-200', 'currentColor'),\n    })',
                                                                                                                                                                   ~~~~~~~~~~~~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:45:173 - error TS1005: ':' expected.

45    borderColor: '({ theme }) => ({\n      ...theme('colors'),\n      ...generateTailwindColors('border'),\n      DEFAULT: theme('colors.gray-200', 'currentColor'),\n    })',
                                                                                                                                                                               ~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:46:57 - error TS1005: ',' expected.

46    backgroundColor: '({ theme }) => ({\n      ...theme('colors'),\n      ...generateTailwindColors('bg'),\n    })',
                                                           ~~~~~~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:46:63 - error TS1005: ',' expected.

46    backgroundColor: '({ theme }) => ({\n      ...theme('colors'),\n      ...generateTailwindColors('bg'),\n    })',
                                                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:46:101 - error TS1005: ':' expected.

46    backgroundColor: '({ theme }) => ({\n      ...theme('colors'),\n      ...generateTailwindColors('bg'),\n    })',
                                                                                                       ~~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:46:103 - error TS1005: ',' expected.

46    backgroundColor: '({ theme }) => ({\n      ...theme('colors'),\n      ...generateTailwindColors('bg'),\n    })',
                                                                                                         ~~~~~~~~~~~~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:46:115 - error TS1005: ':' expected.

46    backgroundColor: '({ theme }) => ({\n      ...theme('colors'),\n      ...generateTailwindColors('bg'),\n    })',
                                                                                                                     ~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:48:39 - error TS1005: ':' expected.

48     '___NumericalValuesJson[sizing]: '...NumericalValuesJson['sizing']
                                         ~~~
../../tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts:52:41 - error TS1005: ':' expected.

52      '___NumericalValuesJson[spacing]: '...NumericalValuesJson['spacing']
                                           ~~~

Error replacing tree! Perhaps a syntax error was inserted (Current: PropertyAssignment -- New: SpreadAssignment).

-- Details --
Path: /tmp/shadcn-kEn5cq/shadcn-tailwind.config.ts
Text: "...ols|gap)-[0-9]{1,2}|/,\n      variants: ['xs', 'sm', 'lg', 'xl'],\n    },\n  ],\n  theme: {\n  \tcolors: {\n            ...generateTailwindColors(,\n            '___generateTailwindColors(color)': '...generateTailwindColors('color')',\n  \t\t'___generateTailwindColors(token)': '...generateTailwindColors('token')',\n  \t\ttransparent: 'tra..."
Stack: Error: Error replacing tree! Perhaps a syntax error was inserted (Current: PropertyAssignment -- New: SpreadAssignment).

System Info

MacOS, Tailwind 3

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[liamstamper]

Just had the same issue and found a workaround. I changed my tailwind.config to js, ran the command then changed it back to ts