What version of Tailwind CSS are you using?

4.1.14

What build tool (or framework if it abstracts the build tool) are you using?

React v18.3.1

What version of Node.js are you using?

v22.17

What browser are you using?

Chrome

What operating system are you using?

Ubuntu

Describe your issue

I am using layer to use tailwindcss in my project. I am trying to set custom breakpoint, so I can use class names as "max-lg:bg-red-500".

here is my configuration in my App.scss :

@layer base tailwind-base, tailwind-utilities tailwind-theme;
@layer tailwind-base {
 @tailwind base;
}
@layer tailwind-utilities {
 @tailwind components;
 @tailwind utilities;
}
@theme {
 --breakpoint-lg: 30rem;
}

in the DOM, the class shows this :

@media not all and (min-width: 1024px) {
 .max-lg\:bg-red-500 {
 --tw-bg-opacity: 1;
 background-color: rgb(239 68 68 / var(--tw-bg-opacity));
 }
}

but it should be "min-width: 480px". Am I doing it wrong ?