@theme directive doesn't work

[samy-mssi]

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 ?

[wongjn]

You seem to actually be using Tailwind v3 in your project. This can be identified by the --tw-bg-opacity usage which does not exist in v4.

Hence, to configure the breakpoints in v3, consider consulting the v3 documentation.

[samy-mssi]

You seem to actually be using Tailwind v3 in your project. This can be identified by the --tw-bg-opacity usage which does not exist in v4.

Hence, to configure the breakpoints in v3, consider consulting the v3 documentation.

Oh, indeed I am on v3.
v4 is specified in my package.json, but it seems that this is the v3 installed in my lockfile... It works with v3 documentation, thank you