Tailwind CSS 屬性未應用於：Angular 組件的根類

Question

我有一個安裝了 Tailwind CSS 的 Angular 12 項目。 package.json如下所示：

{
  "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"
  }
}

我按照此處的 Tailwind CSS 安裝指南進行操作， tailwind.config.js文件如下所示：

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")],
};

此外，我的styles.css也為 Tailwind CSS 設置：

@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
}

我現在正在嘗試在我的 app.component 中創建一個簡單的 header 組件。 I suspect that my basic Tailwind setup is correct since I can access the button-bordered bordered and button-flat classes from the styles.css file and autocomplete works fine in all css files and html templates. 如果我將html, body class 的bg-none屬性更改為bg-purple ，它會按預期工作。

但是，對任何組件的：root class 的任何更改都沒有任何影響，header 的 css 如下所示：

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

然而，瀏覽器中的結果如下所示：

將 Tailwind CSS 添加到 html 模板直接適用於常見的 DOM 元素，例如，如果我設置段落之一的樣式：

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

結果按預期工作：

不幸的是，如果我直接在 html 模板中向組件添加屬性，也會忽略 Tailwind：

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

我不確定如何設置以及設置什么以允許將 Tailwind CSS 直接應用於組件。 我嘗試將組件視圖封裝更改為無，這在:root class 中應用屬性取得了一些成功，但隨后子組件會將父組件的 styles 應用到自己身上（我總是使用:root ZA2F2ED4F8EBC2CABB4C2 來設置組件的樣式本身）。

編輯：編輯最后一段以正確 state 禁用視圖封裝的問題。

Answer 1

再次閱讀Angular 文檔后，我注意到了我的錯誤。 組件元素本身的選擇器不是:root ，而是:host 。

所以例如使用

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

工作得很好。