Tailwind CSS 属性未应用于 Angular 组件的 :root-class

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 安装指南找到 here 并有一个 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 组件。我怀疑我的基本 Tailwind 设置是正确的，因为我可以从 styles.css 文件访问 button-bordered 和 button-flat classes 并且自动完成在所有 css 中都可以正常工作文件和 html 模板。如果我将 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 直接应用于组件。我尝试将组件视图封装更改为 none，这在 :root class 中应用属性方面取得了一些成功，但随后 child 组件将应用 parent 组件本身（我总是使用 :root class 来设置组件本身的样式）。

编辑：编辑了最后一段以正确说明禁用视图封装的问题。

Answer 1

再次阅读 Angular documentation 后，我发现了我的错误。组件元素本身的选择器是 NOT :root，而是 :host。

例如使用

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

完全可以正常工作。

Tailwind CSS 属性未应用于 Angular 组件的 :root-class

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

html

javascript

css

angular

tailwind-css