Tailwind CSS 属性不适用于 Angular 组件的 :root-class答案

【问题标题】：Tailwind CSS attributes not applied to :root-class of Angular componentTailwind CSS 属性不适用于 Angular 组件的 :root-class
【发布时间】：2022-01-03 15:42:37
【问题描述】：

我有一个安装了 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 中创建一个简单的标头组件。我怀疑我的基本 Tailwind 设置是正确的，因为我可以从 styles.css 文件访问 button-bordered 和 button-flat 类，并且自动完成在所有 css 文件和 html 模板中都可以正常工作。如果我将html, body 类的bg-none 属性更改为bg-purple，它将按预期工作。

但是，任何组件的 :root 类的任何更改都没有任何影响，标题的 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 类中应用属性取得了一些成功，但随后子组件会将父组件的样式应用于自身（我总是使用 :root 类来设置样式组件本身）。

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

【问题讨论】：

标签： javascript html css angular tailwind-css

【解决方案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
}

工作得很好。

【讨论】：