Tailwind doesn't work inside the style in a vue component with nuxt-CodePudding

I'm trying to access a Tailwind class inside a component.

I'm using Tailwindcss on Nuxt js.

I can access it through the template perfectly. The problem is when I try to access the classes inside the tag

<style lang="scss" scoped>
.el-menu-item.is-active {
  @apply .bg-black
}
</style>

error

The .bg-back class does not exist. If .bg-back is a custom class, make sure it is defined within a @layer directive.

48 | 49 | .el-menu-item.is-active { 50 | @apply .bg-back | ^ 51 | }

Updated

main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

nuxt.config

css: ['@/assets/css/main'],

CodePudding user response：

You should use 'bg-black' instead of '.bg-black'; 'bg-black' is the class name and '.bg-black' is a css selector. Just remove the dot and it should be okey.