(bug): Custom CSS has no intelligent prompts

[luckzilong]

**What version of Tailwind CSS are you using? **

v4.1.8

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

Vite 6.3.5

**What version of Node.js are you using? **

v20.14.0

**What browser are you using? **

Chrome

**What operating system are you using? **

Windows

Reproduction URL

Describe your issue

Use the following in the css file containing @import "tailwindcss" :

.flex-center {
  @apply flex items-center justify-center;
}

or

@layer utilities {
  .flex-center {
    @apply flex items-center justify-center;
  }
}

When I'm on the element tag 'class', it normally has the intelligent prompt of 'tailwindcss', but does not contain 'flex-center'

[wongjn]

This is because Tailwind doesn't "know" about this class name. You'd need to explicitly register it with @utility:

@utility flex-center {
  @apply flex items-center justify-center;
}

[sovetski]

@utility is very anoying to use especially when we have a lot of custom classes, old @layer components was perfect for multiple classes... and also with the new @layer utilities it does not work too with responsive classes, we must use @utility per class for that 😫