Some custom utilities not working

[Say-M]

Node: v18.15.0
Next.js: 13.4.0
tailwindcss: v3.3.2
postcss: 8.4.23
Browser: Chrome, Firefox
OS: Windows

I created some custom utilities using tailwind @layer
but some of them are not compiling.
For example:
I have .btn utility it compiling properly
but when I define .btn-sm/.btn-lg utilities then its not compiling.
but instead of .btn-sm/.btn-lg class if I write .sm/.lg then its compiling properly.

here is using .btn-sm class its not compiling

here is using only .sm class its compiling