Cannot apply unknown utility class button

[0x0bit]

What version of Tailwind CSS are you using?

For example: 4.1.10

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

{
  "dependencies": {
    "next": "15.3.3",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@tailwindcss/oxide-darwin-x64": "^4.1.9",
    "@tailwindcss/postcss": "^4.1.10",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.3.3",
    "eslint-config-prettier": "^10.1.5",
    "prettier": "^3.5.3",
    "tailwindcss": "^4.1.10",
    "tailwindcss-animate": "^1.0.7",
    "typescript": "^5"
  }
}

What version of Node.js are you using?

v20.19.2

What browser are you using?

Chrome

What operating system are you using?
macOS

Reproduction URL

Describe your issue

When the project is running, an error will be reported when accessed by chrome:

Error: Cannot apply unknown utility class `button`
    [at onInvalidCandidate (project/node_modules/tailwindcss/dist/lib.js:18:1509)]
    [at ge (project/node_modules/tailwindcss/dist/lib.js:13:29503)]
    [at project/node_modules/tailwindcss/dist/lib.js:18:373]
    [at I (project/node_modules/tailwindcss/dist/lib.js:3:1656)]
    [at je (project/node_modules/tailwindcss/dist/lib.js:18:172)]
    [at bi (project/node_modules/tailwindcss/dist/lib.js:35:780)]
    [at async yi (project/node_modules/tailwindcss/dist/lib.js:35:1123)]
    [at async _r (project/node_modules/@tailwindcss/node/dist/index.js:10:3384)]
    [at async p (project/node_modules/@tailwindcss/postcss/dist/index.js:10:4019)]
    [at async Object.Once (project/node_modules/@tailwindcss/postcss/dist/index.js:10:4290)]

[wongjn]

Consider checking:

• The original .button rule is registered into Tailwind with @utility:

  @utility button {
    …
  }

• You are using @reference if you are using @apply in some other separated CSS file:

  @reference "../path/to/styles.css";
  
  element {
    @apply button;
  }

Otherwise, consider providing a git repo that reproduces the unexpected behavior.

[0x0bit]

thanks🙏

[0x0bit]

@layer utilities {
  .shad-no-focus {
     @apply outline-none ring-offset-transparent focus:ring-transparent focus:ring-offset-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0;
  
  }
  
  .shad-input {
      @apply border-none shadow-none p-0 shad-no-focus placeholder:text-light-200 body-2;
  }
}

Error: Cannot apply unknown utility class shad-no-focus

so In v4, how should one refer to another class within one class @wongjn

[wongjn]

@utility shad-no-focus {
  …
}

@utility shad-input {
  @apply … shad-no-focus …;
}