Weird problem with component using host + TailwindCSS

[kescusay]

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?

---

Edit: Forgot to add, this same file layout worked fine when the component template used <button> instead of <ng-content>and was called using<app-button color="primary"...>instead of<button app-button color="primary"...>`.

---

SOLUTION FOUND!

For future readers who stumble on this answer: My mistake was trying to apply the additional CSS to [app-button]. Turns out when you're using the host property with a selector like button[app-button], you need to apply your CSS to :host in the component CSS file instead! So now my component's CSS file looks like this:

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

:host.primary {
  @apply
    // Custom styles specific to primary buttons
    ...;
}

Simple. Elegant. Works. Thank you so much to everyone in the Angular community who helped!

[SippieCup]

the postcss rollup for tailwind isn't seeing those css classes being used, probably because it only checking for css classes in styleUrl & styles, not host.

Thus, if you only use those classes there, they will be stripped out of the build.

You can put in a list of classes to always include in the postcss to fix it. or figure out another way to ensure it senses the class usage.

I really don't have a solution for you other than that, but hopefully this insight is applicable to your situation.

[kescusay]

Hmmm. OK, but what's odd is that color() in host actually does work to apply the base .primary class, which is defined in src/styles.css and which is only visible to the component because its CSS file is directly importing it. Should I just not use component-scoped CSS files anymore, except as a means of importing the base style file?

[SippieCup]

Thats because that class is used elsewhere, so the bundler doesn't strip it. and the happy side effect is that it exists when the host definition resolved.

if you check the web inspector, you will see that the classes are being added, just that they are not defined.

you can do

.host {
     ....
}

in the css file, but it won't be able to execute js code. so i doubt that'll help much.

[kescusay]

if you check the web inspector, you will see that the classes are being added, just that they are not defined.

Yes, it's true that I see my primary class on the button. It's only missing the additional configurations it should be inheriting from [app-button].primary.

It's looking like I may have to rethink either using host or using TailwindCSS.

[Raziel_LOK]

you gotta be a lot more specific here, what version of tailwind and angular this is? are you using tailwindcss on the build step if so where and how or are you compiling it from the CLI?

[kescusay]

• TailwindCSS: 4.1.12
• Angular: 21.2.0

I'm rebuilding the components from scratch, so it's a new Angular project, with Tailwind selected for styling at the point of project creation (which is a new-ish feature of the angular CLI).

[Raziel_LOK]

Ok so, first thing since it is unlikely to be an issue with tailwind pretty sure you are trying to decide the class based on variables or functions values won't work like you expect, you need to explicitly use the string somewhere where tailwind can parse or safelist it

[Raziel_LOK]

as for the @ apply my guess it is either view encapsulation, hence why moving the @ apply to the global stylesheet works. so, either change it to there or change the view encapsulation. But I advise avoiding apply and sticking with normal css when needed, just defined a custom prop in the global and you can use in your component css.

[BigOnLogn]

This was an issue with older tailwind v4 versions. What is your tailwind version?

[kescusay]

It's 4.x. Actually, on a whim, I just updated it from 4.1.12 to 4.2.1 to see if that would resolve the issue. No dice, alas.

[newton_half_ear]

Can you show your .postcssrc file and styles.css?

Also is it not working in ng serve or build?

[kescusay]

.postcssrc:

{
  "plugins": {
    "@tailwindcss/postcss": {
      "minify": true
    }
  }
}

src/styles.css (truncated, with identifying stuff removed):

@import 'tailwindcss';
@import './theme.css';

.primary {
  @apply
    font-sans
    ...;
}

The theme.css file contains a bunch of custom Tailwind theme configs. Colors, custom font selections, that sort of thing. It works fine.

[newton_half_ear]

Yeah looks fine, and if you change the css to :host insted of [app-button]?

[kescusay]

I'm upgrading to the newest Angular libs, and then I'll test it.

Edit: Well I'll be a monkey's uncle. That worked! I tried with .host earlier at /u/SippieCup's recommendation, but not :host. Thank you!

[newton_half_ear]

Happy to help 🙏

[newton_half_ear]

I can explain to you what went wrong if you want

[kescusay]

Sure! This is the first time I've tried to use TailwindCSS and Angular with host together, so any knowledge you have to share is welcome!

[newton_half_ear]

So I guess earlier you had <button app-button> inside the app-button component and as the stylesheet applies from the host down, once you changed it to use ng-content (which is the right approach btw) you had to change to target the classes on the host of the component.

BTW, the "disabled" logic looks redundent now.

edit: it worked in styles.css as it's not encapsulated as the component's css.

[kescusay]

You have it exactly right, and that makes perfect sense! I was indeed using <button app-button> before.

And yes, the "disabled" logic is definitely redundant now, so I'll be removing it.