Weird problem with component using host + TailwindCSS

I'm converting some old components that were built with TailwindCSS to modern Angular standards, and I'm seeing some odd behavior when I modify a button component to use the host property in the component decorator.

Let's say you've got a pretty standard button component, like so:

@Component({
  selector: 'button[app-button]',
  template: '<ng-content></ng-content>',
  styleUrl: './button.css',
  host: {
    '[class]': 'color()',
    '[attr.disabled]': 'disabled() ? true : null',
    ...
  },
})
export class Button implements OnInit {
  disabled = model<boolean>(false);
  color = model<ButtonVariant>('primary');
  ...
}

The logic for the model inputs works fine. What's going odd is the CSS, and I suspect it has something to do with the Tailwind configuration, but I'm not sure where to start with it.

What's happening is twofold:

First, base styles that I've converted to Tailwind that are located in src/styles.css aren't picked up at the component level unless I explicitly import them into src/app/components/button/button.css, like so:

@import '../../../styles.css';

Once they're imported, they work fine, but it's odd that I have to do that.

Secondly - and more importantly - styles that are directly defined in src/app/components/button/button.css itself aren't picked up at all. I'm defining them like this:

[app-button] {
  @apply
    transition-colors
    duration-200
    font-sans
    // Custom styles for all instances of app-button
    ...;
}

[app-button].primary {
  @apply
    // Custom styles specific to primary buttons
    ...;
}

Weirdly, if I take the exact same style definitions and place them directly in src/styles.css, it works fine, even though I'm literally just importing that into the component stylesheet.

I'm sure I'm doing something wrong and this isn't a bug in Angular or Tailwind. Where's my mistake?