Tailwind 样式不适用于 Angular 13

Question

大家好，我正在尝试以 Angular 实现 Tailwind，我安装了 tailwindcss post css 和 autoprefixer

{
  "name": "ip-tracker",
  "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.0.0",
    "@angular/common": "~13.0.0",
    "@angular/compiler": "~13.0.0",
    "@angular/core": "~13.0.0",
    "@angular/forms": "~13.0.0",
    "@angular/platform-browser": "~13.0.0",
    "@angular/platform-browser-dynamic": "~13.0.0",
    "@angular/router": "~13.0.0",
    "leaflet": "^1.7.1",
    "rxjs": "~7.4.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.0.1",
    "@angular/cli": "~13.0.1",
    "@angular/compiler-cli": "~13.0.0",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "autoprefixer": "^10.4.2",
    "jasmine-core": "~3.10.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "postcss": "^8.4.6",
    "tailwindcss": "^2.1.2",
    "typescript": "~4.4.3"
  }
}

我在 style.scss 文件中导入了样式：

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

这是我的 tailwind.config.js 文件：

module.exports = {
  mode: "jit",
  purge: {
    enabled: true,
    content: ["./src/**/*.{html,ts}"],
  },
  darkMode: false,
  theme: {
    extend: {},
    screens: {
      sm: "375px",
      lg: "1440px",
    },
    colors: {
      "very-dark-grey": "hsl(0, 0%, 17%)",
      "dark-grey": "hsl(0, 0%, 59%)",
    },
    fontFamily: {
      sans: ["Rubik", "sans-serif"],
    },
  },
  plugins: [
    require("postcss-import"),
    require("tailwindcss"),
    require("autoprefixer"),
  ],
};

但是当我使用其中一个顺风类时，我看不到应用于元素的样式：

<h1 class="text-white">Test</h1>

谁能告诉我哪里错了，为什么？

非常感谢...

Answer 1

...
theme: {
    extend: {
        colors: {
            "very-dark-grey": "hsl(0, 0%, 17%)",
            "dark-grey": "hsl(0, 0%, 59%)",
        },
    },
...