Tailwind does not recognize classes on the angular component tag

I have two components called button and text-box and I use sass to style them. To do this, I gave each component a class like the following:

textbox component:

@Component({
  selector: 'my-text-box',
  template:`<input type="text">`,
  host: { class: 'editor-container' },
})
export class MyTextBoxComponent {}

@layer components {
    .editor-container {
        @apply block bg-white shadow-sm border border-solid border-black;
    }
}

button component:

@Component({
  selector: 'my-button',
  template:`
  <button>
    Hello
  </button>
  `,
  host: { class: 'my-button' },
})
export class MyButtonComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}
}

@layer components {
    .my-button {
        & > button {
            @apply p-5 text-sm relative inline-flex items-center justify-center select-none font-medium whitespace-nowrap overflow-hidden text-ellipsis transition-all bg-blue-600;
        }
    }
}

The problem arises when the style of my class does not load if the name of the component tag is not the same. For example, I change the "editor-container" class with a “my-text-box”. Everything works fine. (I need this feature to develop components). In fact, if the class name and tag are the same, the style will be added.

Is this a bug? Can I use Customizing extraction logic to set tailwind to check tags in addition to classes?

framework: Angular version 14.0.0 tailwind version: 3.1.4 nodejs version: 16.15.0 browser: Chrome operating system: macOS, Windows

[asafari72]

Hi, Has anyone found a solution?

[thecrypticace]

@asafari72 Would you mind providing a small reproduction repo that I can clone with instructions? I don’t quite understand what the problem is that you’re describing.