Tailwind CSS attributes not applied to :root-class of Angular component

Question

I have an Angular 12 project with Tailwind CSS installed. The package.json looks as follows:

{
  "name": "some-angular-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.1.0",
    "@angular/common": "~13.1.0",
    "@angular/compiler": "~13.1.0",
    "@angular/core": "~13.1.0",
    "@angular/forms": "~13.1.0",
    "@angular/platform-browser": "~13.1.0",
    "@angular/platform-browser-dynamic": "~13.1.0",
    "@angular/router": "~13.1.0",
    "@tailwindcss/forms": "^0.4.0",
    "@tailwindcss/typography": "^0.5.0",
    "rxjs": "~7.4.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.1.2",
    "@angular/cli": "~13.1.2",
    "@angular/compiler-cli": "~13.1.0",
    "@types/node": "^12.11.1",
    "autoprefixer": "^10.4.1",
    "postcss": "^8.4.5",
    "prettier": "^2.5.1",
    "tailwindcss": "^3.0.8",
    "typescript": "~4.5.2"
  }
}

I followed the Tailwind CSS installation guide found here and have a tailwind.config.js file looking like this:

module.exports = {
  mode: "jit",
  purge: {
    enabled: true,
    content: ["./src/**/*.{html,ts}"],
  },
  content: [],
  darkMode: "class",
  theme: {
    colors: {
      purple: "#5c068c",
      pink: "#ce0058",
      blue: "#1e22aa",
      white: "#ffffff",
      grey: "#676767",
    },
    extend: {
      minWidth: {
        150: "150px",
      },
      height: {
        75: "75px",
      },
      borderRadius: {
        5: "5px",
      },
    },
  },
  plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],
};

Additionally, my styles.css is set up for Tailwind CSS as well:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

:root{
  font-size: 16px;
}

html, body {
  @apply p-0 m-0 overflow-hidden select-none w-screen h-screen font-sans bg-none}

.button-flat {
  @apply box-border cursor-pointer whitespace-nowrap text-center leading-9 font-medium border-purple border-2 outline-none relative inline-block items-baseline m-0 py-0 px-4 rounded-5 bg-purple text-white
}

.button-bordered {
  @apply box-border cursor-pointer whitespace-nowrap text-center leading-9 font-medium border-grey border-2  outline-none relative inline-block items-baseline m-0 py-0 px-4 rounded-5 bg-none text-purple
}

I am now trying to create a simple header component inside my app.component. I suspect that my basic Tailwind setup is correct since I can access the button-bordered and button-flat classes from the styles.css file and autocomplete works fine in all css files and html templates. If I change the bg-none attribute of the html, body class to bg-purple, it works as intended.

However, any changes to the :root class of any component have no effect at all, the css for the header looks as follows:

:root {
  @apply flex flex-row items-center content-between h-8 bg-purple max-h-8 text-pink
}

The result in the browser however, looks like this:

Adding Tailwind CSS to the html template directly works for common DOM elements, e.g. if I style one of the paragraphs:

<section>
  <p class="text-pink bg-blue p-10">
    a paragraph
  </p>
</section>
<section>
  <p>
    a paragraph
  </p>
</section>

The result works as expected:

Unfortunately, Tailwind is also ignored, if I add attributes to a component directly in the html template:

<app-header class="bg-purple"></app-header>

I am not sure, how and what to setup in order to allow Tailwind CSS being applied to a component directly. I tried to change the component view encapsulation to none, which yielded some success with the application of attributes in the :root class, but then child components would apply styles of parent components to themselves (I always use the :root class to style the component itself).

Edit: Edited last paragraph to correctly state the issue with disabled view encapsulation.

Answer 1

After reading through the Angular documentation again, I noticed my error. The selector for the component element itself is NOT :root, but :host instead.

So e.g. using

:host {
  @apply flex flex-row items-center content-between h-8 bg-purple max-h-8 p-4 w-full
}

works completely fine.