How to add custom class to with @apply (Tailwind) in Angular project?-CodePudding

Hi everyone, I have error in css file, with custorm tailwind class. How to fix it?

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: ['./src/**/*.{html,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Image

If I delete focus:shadow-outline code, it's begin working

CodePudding user response：

shadow-outline is a custom class.

You must first define it before using it like this:

@layer components {
  .shadow-outline {
    @apply w-auto /*some classes*/;
  }
  .button {
    @apply block uppercase mx-auto shadow bg-indigo-800 hover:bg-indigo-700 focus:shadow-outline focus:outline-none text-white text-xs py-3 px-10 rounded;
  }
}