TypeError: Cannot read properties of undefined (reading 'flatMap') #18239
-
|
Hello, I am trying to migrate from tailwind v3 to v4 by running the npx @tailwind/upgrade@next but i am getting error as shown in image below, i am using vite and my node version is 20.16.0, can anyone help me out in solving this |
Beta Was this translation helpful? Give feedback.
Answered by
RobinMalfait
Jun 6, 2025
Replies: 3 comments 7 replies
-
|
Try by using the latest version: - npx @tailwindcss/upgrade@next
+ npx @tailwindcss/upgrade@latestBut before you do that, make sure your repo is in a clean state again. So throw away changes the upgrade tool made (if any) and run |
Beta Was this translation helpful? Give feedback.
6 replies
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
I have removed my node_modules folder and package-lock.json file and reinstalled newly everything and then tried this |
Beta Was this translation helpful? Give feedback.
-
|
Sorry I meant |
Beta Was this translation helpful? Give feedback.
Answer selected by
vishnusarma
-
|
Thank You @RobinMalfait , It's Working now |
Beta Was this translation helpful? Give feedback.
-
|
But after running this it seems everything is successful but my tailwind config file is not removed automatically? |
Beta Was this translation helpful? Give feedback.
-
|
If we couldn't migrate your tailwind.config.js file in full, then it's kept and an If you create a minimal reproduction repo, then we can take a look at why some parts couldn't be migrated automatically. |
Beta Was this translation helpful? Give feedback.
-
|
Hey i tried : npx @tailwindcss/upgrade@latest, on my t3-app next app, it worked but the style is broken, seem it didn't converted the tailwind config here, there is some setup with the path, the extends and the tw color shortcut for work with alpha, do you see something it broke the migration ?: import { type Config } from "tailwindcss"
export default {
mode: 'jit',
content: ["./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
zIndex: { '999': '99999999' },
screens: {
'labeling-row-2xl': '1754px',
'labeling-row-3xl': '1980px',
},
},
colors: {
transparent: 'transparent',
white: 'hsl(var(--color-white) / <alpha-value> )',
black: 'hsl(var(--color-black) / <alpha-value> )',
light: 'hsl(var(--color-gray-200) / <alpha-value> )',
dark: 'hsl(var(--color-gray-700) / <alpha-value> )',
"severity-vo": 'hsl(var(--color-severity-vo) / <alpha-value> )',
"severity-va": 'hsl(var(--color-severity-va) / <alpha-value> )',
"severity-vi": 'hsl(var(--color-severity-vi) / <alpha-value> )',
"severity-vr": 'hsl(var(--color-severity-vr) / <alpha-value> )',
gray: {
50: 'hsl(var(--color-gray-50) / <alpha-value> )',
100: 'hsl(var(--color-gray-100) / <alpha-value> )',
200: 'hsl(var(--color-gray-200) / <alpha-value> )',
300: 'hsl(var(--color-gray-300) / <alpha-value> )',
400: 'hsl(var(--color-gray-400) / <alpha-value> )',
500: 'hsl(var(--color-gray-500) / <alpha-value> )',
600: 'hsl(var(--color-gray-600) / <alpha-value> )',
700: 'hsl(var(--color-gray-700) / <alpha-value> )',
800: 'hsl(var(--color-gray-800) / <alpha-value> )',
900: 'hsl(var(--color-gray-900) / <alpha-value> )',
DEFAULT: 'hsl(var(--color-gray-500) / <alpha-value> )',
light: 'hsl(var(--color-gray-300) / <alpha-value> )',
lighter: 'hsl(var(--color-gray-200) / <alpha-value> )',
lightest: 'hsl(var(--color-gray-100) / <alpha-value> )',
dark: 'hsl(var(--color-gray-700) / <alpha-value> )',
darker: 'hsl(var(--color-gray-800) / <alpha-value> )',
darkest: 'hsl(var(--color-gray-900) / <alpha-value> )',
},
cyan: {
50: 'hsl(var(--color-cyan-50) / <alpha-value> )',
100: 'hsl(var(--color-cyan-100) / <alpha-value> )',
200: 'hsl(var(--color-cyan-200) / <alpha-value> )',
300: 'hsl(var(--color-cyan-300) / <alpha-value> )',
400: 'hsl(var(--color-cyan-400) / <alpha-value> )',
500: 'hsl(var(--color-cyan-500) / <alpha-value> )',
600: 'hsl(var(--color-cyan-600) / <alpha-value> )',
700: 'hsl(var(--color-cyan-700) / <alpha-value> )',
800: 'hsl(var(--color-cyan-800) / <alpha-value> )',
900: 'hsl(var(--color-cyan-900) / <alpha-value> )',
DEFAULT: 'hsl(var(--color-cyan-500) / <alpha-value> )',
light: 'hsl(var(--color-cyan-300) / <alpha-value> )',
lighter: 'hsl(var(--color-cyan-200) / <alpha-value> )',
lightest: 'hsl(var(--color-cyan-100) / <alpha-value> )',
dark: 'hsl(var(--color-cyan-700) / <alpha-value> )',
darker: 'hsl(var(--color-cyan-800) / <alpha-value> )',
darkest: 'hsl(var(--color-cyan-900) / <alpha-value> )',
},
blue: {
50: 'hsl(var(--color-blue-50) / <alpha-value> )',
100: 'hsl(var(--color-blue-100) / <alpha-value> )',
200: 'hsl(var(--color-blue-200) / <alpha-value> )',
300: 'hsl(var(--color-blue-300) / <alpha-value> )',
400: 'hsl(var(--color-blue-400) / <alpha-value> )',
500: 'hsl(var(--color-blue-500) / <alpha-value> )',
600: 'hsl(var(--color-blue-600) / <alpha-value> )',
700: 'hsl(var(--color-blue-700) / <alpha-value> )',
800: 'hsl(var(--color-blue-800) / <alpha-value> )',
900: 'hsl(var(--color-blue-900) / <alpha-value> )',
DEFAULT: 'hsl(var(--color-blue-500) / <alpha-value> )',
light: 'hsl(var(--color-blue-300) / <alpha-value> )',
lighter: 'hsl(var(--color-blue-200) / <alpha-value> )',
lightest: 'hsl(var(--color-blue-100) / <alpha-value> )',
dark: 'hsl(var(--color-blue-700) / <alpha-value> )',
darker: 'hsl(var(--color-blue-800) / <alpha-value> )',
darkest: 'hsl(var(--color-blue-900) / <alpha-value> )',
},
indigo: {
50: 'hsl(var(--color-indigo-50) / <alpha-value> )',
100: 'hsl(var(--color-indigo-100) / <alpha-value> )',
200: 'hsl(var(--color-indigo-200) / <alpha-value> )',
300: 'hsl(var(--color-indigo-300) / <alpha-value> )',
400: 'hsl(var(--color-indigo-400) / <alpha-value> )',
500: 'hsl(var(--color-indigo-500) / <alpha-value> )',
600: 'hsl(var(--color-indigo-600) / <alpha-value> )',
700: 'hsl(var(--color-indigo-700) / <alpha-value> )',
800: 'hsl(var(--color-indigo-800) / <alpha-value> )',
900: 'hsl(var(--color-indigo-900) / <alpha-value> )',
DEFAULT: 'hsl(var(--color-blue-500) / <alpha-value> )',
light: 'hsl(var(--color-blue-300) / <alpha-value> )',
lighter: 'hsl(var(--color-blue-200) / <alpha-value> )',
lightest: 'hsl(var(--color-blue-100) / <alpha-value> )',
dark: 'hsl(var(--color-blue-700) / <alpha-value> )',
darker: 'hsl(var(--color-blue-800) / <alpha-value> )',
darkest: 'hsl(var(--color-blue-900) / <alpha-value> )',
},
green: {
50: 'hsl(var(--color-green-50) / <alpha-value> )',
100: 'hsl(var(--color-green-100) / <alpha-value> )',
200: 'hsl(var(--color-green-200) / <alpha-value> )',
300: 'hsl(var(--color-green-300) / <alpha-value> )',
400: 'hsl(var(--color-green-400) / <alpha-value> )',
500: 'hsl(var(--color-green-500) / <alpha-value> )',
600: 'hsl(var(--color-green-600) / <alpha-value> )',
700: 'hsl(var(--color-green-700) / <alpha-value> )',
800: 'hsl(var(--color-green-800) / <alpha-value> )',
900: 'hsl(var(--color-green-900) / <alpha-value> )',
DEFAULT: 'hsl(var(--color-green-500) / <alpha-value> )',
light: 'hsl(var(--color-green-300) / <alpha-value> )',
lighter: 'hsl(var(--color-green-200) / <alpha-value> )',
lightest: 'hsl(var(--color-green-100) / <alpha-value> )',
dark: 'hsl(var(--color-green-700) / <alpha-value> )',
darker: 'hsl(var(--color-green-800) / <alpha-value> )',
darkest: 'hsl(var(--color-green-900) / <alpha-value> )',
},
teal: {
50: 'hsl(var(--color-teal-50) / <alpha-value> )',
100: 'hsl(var(--color-teal-100) / <alpha-value> )',
200: 'hsl(var(--color-teal-200) / <alpha-value> )',
300: 'hsl(var(--color-teal-300) / <alpha-value> )',
400: 'hsl(var(--color-teal-400) / <alpha-value> )',
500: 'hsl(var(--color-teal-500) / <alpha-value> )',
600: 'hsl(var(--color-teal-600) / <alpha-value> )',
700: 'hsl(var(--color-teal-700) / <alpha-value> )',
800: 'hsl(var(--color-teal-800) / <alpha-value> )',
900: 'hsl(var(--color-teal-900) / <alpha-value> )',
DEFAULT: 'hsl(var(--color-teal-500) / <alpha-value> )',
light: 'hsl(var(--color-teal-300) / <alpha-value> )',
lighter: 'hsl(var(--color-teal-200) / <alpha-value> )',
lightest: 'hsl(var(--color-teal-100) / <alpha-value> )',
dark: 'hsl(var(--color-teal-700) / <alpha-value> )',
darker: 'hsl(var(--color-teal-800) / <alpha-value> )',
darkest: 'hsl(var(--color-teal-900) / <alpha-value> )',
},
yellow: {
50: 'hsl(var(--color-yellow-50) / <alpha-value> )',
100: 'hsl(var(--color-yellow-100) / <alpha-value> )',
200: 'hsl(var(--color-yellow-200) / <alpha-value> )',
300: 'hsl(var(--color-yellow-300) / <alpha-value> )',
400: 'hsl(var(--color-yellow-400) / <alpha-value> )',
500: 'hsl(var(--color-yellow-500) / <alpha-value> )',
600: 'hsl(var(--color-yellow-600) / <alpha-value> )',
700: 'hsl(var(--color-yellow-700) / <alpha-value> )',
800: 'hsl(var(--color-yellow-800) / <alpha-value> )',
900: 'hsl(var(--color-yellow-900) / <alpha-value> )',
DEFAULT: 'hsl(var(--color-yellow-500) / <alpha-value> )',
light: 'hsl(var(--color-yellow-300) / <alpha-value> )',
lighter: 'hsl(var(--color-yellow-200) / <alpha-value> )',
lightest: 'hsl(var(--color-yellow-100) / <alpha-value> )',
dark: 'hsl(var(--color-yellow-700) / <alpha-value> )',
darker: 'hsl(var(--color-yellow-800) / <alpha-value> )',
darkest: 'hsl(var(--color-yellow-900) / <alpha-value> )',
},
orange: {
50: 'hsl(var(--color-orange-50) / <alpha-value> )',
100: 'hsl(var(--color-orange-100) / <alpha-value> )',
200: 'hsl(var(--color-orange-200) / <alpha-value> )',
300: 'hsl(var(--color-orange-300) / <alpha-value> )',
400: 'hsl(var(--color-orange-400) / <alpha-value> )',
500: 'hsl(var(--color-orange-500) / <alpha-value> )',
600: 'hsl(var(--color-orange-600) / <alpha-value> )',
700: 'hsl(var(--color-orange-700) / <alpha-value> )',
800: 'hsl(var(--color-orange-800) / <alpha-value> )',
900: 'hsl(var(--color-orange-900) / <alpha-value> )',
DEFAULT: 'hsl(var(--color-orange-500) / <alpha-value> )',
light: 'hsl(var(--color-orange-300) / <alpha-value> )',
lighter: 'hsl(var(--color-orange-200) / <alpha-value> )',
lightest: 'hsl(var(--color-orange-100) / <alpha-value> )',
dark: 'hsl(var(--color-orange-700) / <alpha-value> )',
darker: 'hsl(var(--color-orange-800) / <alpha-value> )',
darkest: 'hsl(var(--color-orange-900) / <alpha-value> )',
},
red: {
50: 'hsl(var(--color-red-50) / <alpha-value> )',
100: 'hsl(var(--color-red-100) / <alpha-value> )',
200: 'hsl(var(--color-red-200) / <alpha-value> )',
300: 'hsl(var(--color-red-300) / <alpha-value> )',
400: 'hsl(var(--color-red-400) / <alpha-value> )',
500: 'hsl(var(--color-red-500) / <alpha-value> )',
600: 'hsl(var(--color-red-600) / <alpha-value> )',
700: 'hsl(var(--color-red-700) / <alpha-value> )',
800: 'hsl(var(--color-red-800) / <alpha-value> )',
900: 'hsl(var(--color-red-900) / <alpha-value> )',
DEFAULT: 'hsl(var(--color-red-500) / <alpha-value> )',
light: 'hsl(var(--color-red-300) / <alpha-value> )',
lighter: 'hsl(var(--color-red-200) / <alpha-value> )',
lightest: 'hsl(var(--color-red-100) / <alpha-value> )',
dark: 'hsl(var(--color-red-700) / <alpha-value> )',
darker: 'hsl(var(--color-red-800) / <alpha-value> )',
darkest: 'hsl(var(--color-red-900) / <alpha-value> )',
},
pink: {
50: 'hsl(var(--color-pink-50) / <alpha-value> )',
100: 'hsl(var(--color-pink-100) / <alpha-value> )',
200: 'hsl(var(--color-pink-200) / <alpha-value> )',
300: 'hsl(var(--color-pink-300) / <alpha-value> )',
400: 'hsl(var(--color-pink-400) / <alpha-value> )',
500: 'hsl(var(--color-pink-500) / <alpha-value> )',
600: 'hsl(var(--color-pink-600) / <alpha-value> )',
700: 'hsl(var(--color-pink-700) / <alpha-value> )',
800: 'hsl(var(--color-pink-800) / <alpha-value> )',
900: 'hsl(var(--color-pink-900) / <alpha-value> )',
DEFAULT: 'hsl(var(--color-pink-500) / <alpha-value> )',
light: 'hsl(var(--color-pink-300) / <alpha-value> )',
lighter: 'hsl(var(--color-pink-200) / <alpha-value> )',
lightest: 'hsl(var(--color-pink-100) / <alpha-value> )',
dark: 'hsl(var(--color-pink-700) / <alpha-value> )',
darker: 'hsl(var(--color-pink-800) / <alpha-value> )',
darkest: 'hsl(var(--color-pink-900) / <alpha-value> )',
},
purple: {
50: 'hsl(var(--color-purple-50) / <alpha-value> )',
100: 'hsl(var(--color-purple-100) / <alpha-value> )',
200: 'hsl(var(--color-purple-200) / <alpha-value> )',
300: 'hsl(var(--color-purple-300) / <alpha-value> )',
400: 'hsl(var(--color-purple-400) / <alpha-value> )',
500: 'hsl(var(--color-purple-500) / <alpha-value> )',
600: 'hsl(var(--color-purple-600) / <alpha-value> )',
700: 'hsl(var(--color-purple-700) / <alpha-value> )',
800: 'hsl(var(--color-purple-800) / <alpha-value> )',
900: 'hsl(var(--color-purple-900) / <alpha-value> )',
DEFAULT: 'hsl(var(--color-purple-500) / <alpha-value> )',
light: 'hsl(var(--color-purple-300) / <alpha-value> )',
lighter: 'hsl(var(--color-purple-200) / <alpha-value> )',
lightest: 'hsl(var(--color-purple-100) / <alpha-value> )',
dark: 'hsl(var(--color-purple-700) / <alpha-value> )',
darker: 'hsl(var(--color-purple-800) / <alpha-value> )',
darkest: 'hsl(var(--color-purple-900) / <alpha-value> )',
},
neutral: {
50: 'hsl(var(--color-gray-50) / <alpha-value> )',
100: 'hsl(var(--color-gray-100) / <alpha-value> )',
200: 'hsl(var(--color-gray-200) / <alpha-value> )',
300: 'hsl(var(--color-gray-300) / <alpha-value> )',
400: 'hsl(var(--color-gray-400) / <alpha-value> )',
500: 'hsl(var(--color-gray-500) / <alpha-value> )',
600: 'hsl(var(--color-gray-600) / <alpha-value> )',
700: 'hsl(var(--color-gray-700) / <alpha-value> )',
800: 'hsl(var(--color-gray-800) / <alpha-value> )',
900: 'hsl(var(--color-gray-900) / <alpha-value> )',
DEFAULT: 'hsl(var(--color-gray-500) / <alpha-value> )',
light: 'hsl(var(--color-gray-300) / <alpha-value> )',
lighter: 'hsl(var(--color-gray-200) / <alpha-value> )',
lightest: 'hsl(var(--color-gray-100) / <alpha-value> )',
dark: 'hsl(var(--color-gray-700) / <alpha-value> )',
darker: 'hsl(var(--color-gray-800) / <alpha-value> )',
darkest: 'hsl(var(--color-gray-900) / <alpha-value> )',
},
primary: {
50: 'hsl(var(--color-blue-50) / <alpha-value> )',
100: 'hsl(var(--color-blue-100) / <alpha-value> )',
200: 'hsl(var(--color-blue-200) / <alpha-value> )',
300: 'hsl(var(--color-blue-300) / <alpha-value> )',
400: 'hsl(var(--color-blue-400) / <alpha-value> )',
500: 'hsl(var(--color-blue-500) / <alpha-value> )',
600: 'hsl(var(--color-blue-600) / <alpha-value> )',
700: 'hsl(var(--color-blue-700) / <alpha-value> )',
800: 'hsl(var(--color-blue-800) / <alpha-value> )',
900: 'hsl(var(--color-blue-900) / <alpha-value> )',
DEFAULT: 'hsl(var(--color-blue-500) / <alpha-value> )',
light: 'hsl(var(--color-blue-300) / <alpha-value> )',
lighter: 'hsl(var(--color-blue-200) / <alpha-value> )',
lightest: 'hsl(var(--color-blue-100) / <alpha-value> )',
dark: 'hsl(var(--color-blue-700) / <alpha-value> )',
darker: 'hsl(var(--color-blue-800) / <alpha-value> )',
darkest: 'hsl(var(--color-blue-900) / <alpha-value> )',
},
secondary: {
50: 'hsl(var(--color-orange-50) / <alpha-value> )',
100: 'hsl(var(--color-orange-100) / <alpha-value> )',
200: 'hsl(var(--color-orange-200) / <alpha-value> )',
300: 'hsl(var(--color-orange-300) / <alpha-value> )',
400: 'hsl(var(--color-orange-400) / <alpha-value> )',
500: 'hsl(var(--color-orange-500) / <alpha-value> )',
600: 'hsl(var(--color-orange-600) / <alpha-value> )',
700: 'hsl(var(--color-orange-700) / <alpha-value> )',
800: 'hsl(var(--color-orange-800) / <alpha-value> )',
900: 'hsl(var(--color-orange-900) / <alpha-value> )',
DEFAULT: 'hsl(var(--color-orange-500) / <alpha-value> )',
light: 'hsl(var(--color-orange-300) / <alpha-value> )',
lighter: 'hsl(var(--color-orange-200) / <alpha-value> )',
lightest: 'hsl(var(--color-orange-100) / <alpha-value> )',
dark: 'hsl(var(--color-orange-700) / <alpha-value> )',
darker: 'hsl(var(--color-orange-800) / <alpha-value> )',
darkest: 'hsl(var(--color-orange-900) / <alpha-value> )',
},
success: {
50: 'hsl(var(--color-green-50) / <alpha-value> )',
100: 'hsl(var(--color-green-100) / <alpha-value> )',
200: 'hsl(var(--color-green-200) / <alpha-value> )',
300: 'hsl(var(--color-green-300) / <alpha-value> )',
400: 'hsl(var(--color-green-400) / <alpha-value> )',
500: 'hsl(var(--color-green-500) / <alpha-value> )',
600: 'hsl(var(--color-green-600) / <alpha-value> )',
700: 'hsl(var(--color-green-700) / <alpha-value> )',
800: 'hsl(var(--color-green-800) / <alpha-value> )',
900: 'hsl(var(--color-green-900) / <alpha-value> )',
DEFAULT: 'hsl(var(--color-green-500) / <alpha-value> )',
light: 'hsl(var(--color-green-300) / <alpha-value> )',
lighter: 'hsl(var(--color-green-200) / <alpha-value> )',
lightest: 'hsl(var(--color-green-100) / <alpha-value> )',
dark: 'hsl(var(--color-green-700) / <alpha-value> )',
darker: 'hsl(var(--color-green-800) / <alpha-value> )',
darkest: 'hsl(var(--color-green-900) / <alpha-value> )',
},
warning: {
50: 'hsl(var(--color-yellow-50) / <alpha-value> )',
100: 'hsl(var(--color-yellow-100) / <alpha-value> )',
200: 'hsl(var(--color-yellow-200) / <alpha-value> )',
300: 'hsl(var(--color-yellow-300) / <alpha-value> )',
400: 'hsl(var(--color-yellow-400) / <alpha-value> )',
500: 'hsl(var(--color-yellow-500) / <alpha-value> )',
600: 'hsl(var(--color-yellow-600) / <alpha-value> )',
700: 'hsl(var(--color-yellow-700) / <alpha-value> )',
800: 'hsl(var(--color-yellow-800) / <alpha-value> )',
900: 'hsl(var(--color-yellow-900) / <alpha-value> )',
DEFAULT: 'hsl(var(--color-yellow-500) / <alpha-value> )',
light: 'hsl(var(--color-yellow-300) / <alpha-value> )',
lighter: 'hsl(var(--color-yellow-200) / <alpha-value> )',
lightest: 'hsl(var(--color-yellow-100) / <alpha-value> )',
dark: 'hsl(var(--color-yellow-700) / <alpha-value> )',
darker: 'hsl(var(--color-yellow-800) / <alpha-value> )',
darkest: 'hsl(var(--color-yellow-900) / <alpha-value> )',
},
danger: {
50: 'hsl(var(--color-red-50) / <alpha-value> )',
100: 'hsl(var(--color-red-100) / <alpha-value> )',
200: 'hsl(var(--color-red-200) / <alpha-value> )',
300: 'hsl(var(--color-red-300) / <alpha-value> )',
400: 'hsl(var(--color-red-400) / <alpha-value> )',
500: 'hsl(var(--color-red-500) / <alpha-value> )',
600: 'hsl(var(--color-red-600) / <alpha-value> )',
700: 'hsl(var(--color-red-700) / <alpha-value> )',
800: 'hsl(var(--color-red-800) / <alpha-value> )',
900: 'hsl(var(--color-red-900) / <alpha-value> )',
DEFAULT: 'hsl(var(--color-red-500) / <alpha-value> )',
light: 'hsl(var(--color-red-300) / <alpha-value> )',
lighter: 'hsl(var(--color-red-200) / <alpha-value> )',
lightest: 'hsl(var(--color-red-100) / <alpha-value> )',
dark: 'hsl(var(--color-red-700) / <alpha-value> )',
darker: 'hsl(var(--color-red-800) / <alpha-value> )',
darkest: 'hsl(var(--color-red-900) / <alpha-value> )',
},
info: {
50: 'hsl(var(--color-cyan-50) / <alpha-value> )',
100: 'hsl(var(--color-cyan-100) / <alpha-value> )',
200: 'hsl(var(--color-cyan-200) / <alpha-value> )',
300: 'hsl(var(--color-cyan-300) / <alpha-value> )',
400: 'hsl(var(--color-cyan-400) / <alpha-value> )',
500: 'hsl(var(--color-cyan-500) / <alpha-value> )',
600: 'hsl(var(--color-cyan-600) / <alpha-value> )',
700: 'hsl(var(--color-cyan-700) / <alpha-value> )',
800: 'hsl(var(--color-cyan-800) / <alpha-value> )',
900: 'hsl(var(--color-cyan-900) / <alpha-value> )',
DEFAULT: 'hsl(var(--color-cyan-500) / <alpha-value> )',
light: 'hsl(var(--color-cyan-300) / <alpha-value> )',
lighter: 'hsl(var(--color-cyan-200) / <alpha-value> )',
lightest: 'hsl(var(--color-cyan-100) / <alpha-value> )',
dark: 'hsl(var(--color-cyan-700) / <alpha-value> )',
darker: 'hsl(var(--color-cyan-800) / <alpha-value> )',
darkest: 'hsl(var(--color-cyan-900) / <alpha-value> )',
},
background: {
DEFAULT: 'hsl(var(--color-white) / <alpha-value> )',
variant: 'hsl(var(--color-gray-50) / <alpha-value> )',
},
surface: {
DEFAULT: 'hsl(var(--color-white) / <alpha-value> )',
},
},
},
variants: {},
plugins: [],
} satisfies Config
export const tw = (color: string, alpha: number = 1) => color.replace('<alpha-value>', alpha.toString()) |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
If it is not converted your tailwind config file, then you can migrate all those CSS vars to your index.css manually, but before that check your package.json whether tailwind version is changed from V3 to V4 |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
Thanks for your assist, I will do a new test. |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Sorry I meant
npx @tailwindcss/upgrade@latestnotnpx @tailwind/upgrade@latest. I copied it from your comment and adjusted the@nextinto@latest, but it should be tailwindcss.