Generated break-points not working

[veffev]

I used upgrade tools command line : $ npx @tailwindcss/upgrade

The command generated this breakpoint:

`@theme {
--breakpoint-mobile: max 500px;
--breakpoint-tablet: 501px 640px;
--breakpoint-medium: 641px 800px;
--breakpoint-large: 801px 1023px;
--breakpoint-largeXL: 1024px 1279px;
--breakpoint-underLaptop: max 1023px;
--breakpoint-courseContent: max 1080px;

--breakpoint-m: 640px;
--breakpoint-mXL: 800px;
--breakpoint-laptop: 1024px;
--breakpoint-desktop: 1280px;
--breakpoint-desktopXL: 1680px;
--breakpoint-desktopXXL: 2024px;
--breakpoint-tableMin: 1320px;
--breakpoint-tableDemoMin: 1150px;
}`

some breakpoint don't work, like:

--breakpoint-tablet: 501px 640px; --breakpoint-medium: 641px 800px; --breakpoint-large: 801px 1023px; --breakpoint-largeXL: 1024px 1279px;

I'm using:
Tailwind version: v4.0.6
NextJS: 14.1.4

What's the solution ?

[wongjn]

--breakpoint-mobile: max 500px;
--breakpoint-tablet: 501px 640px;
--breakpoint-medium: 641px 800px;
--breakpoint-large: 801px 1023px;
--breakpoint-largeXL: 1024px 1279px;
--breakpoint-underLaptop: max 1023px;
--breakpoint-courseContent: max 1080px;

These are invalid, as you might have guessed. You'd want to register these via @custom-variant:

@custom-variant mobile (@media (max-width: 500px));
@custom-variant tablet (@media (min-width: 501px) and (max-width: 640px));
Etc…

[veffev]

I’m sorry to say this, but it doesn’t work.

I executed npx @tailwindcss/upgrade and I still have the tailwaind.config.js, it is normal ?