css - 许多 Tailwind CSS 类不适用于我的 Angular 12 元素

Question

我正在开发一个安装了 Tailwind CSS 的 Angular 12 元素。我关注了official docs似乎一切正常；但我不明白为什么有些类(class)有效而有些无效。

例如，我可以有这段代码，试图在我的 div 上添加两个 Tailwind 类:

<div class="text-center mt-2">

    <h2>Please go back to <a class="custom-links" href="./login">login</a></h2>
</div>

text-center 类有效，但 mt-2 无效。这种事情在整个元素中都在发生。我必须解决它的方法是使用传统 CSS 或将其与 Tailwind 混合使用，如下所示:

<div id="back-to-login" class="text-center">

    <h2>Please go back to <a class="custom-links" href="./login">login</a></h2>
</div>

在 css 上:

#back-to-login{
    
    margin-top: 40px;

}

然后它工作正常并且应用了 margin-top。

你知道会发生什么吗？

按照建议重新安装 node_modules here没有解决它。

非常感谢。

我添加了 styles.css 和 tailwind.config 的代码

样式.css

/* You can add global styles to this file, and also import other style files */
@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: "firechat";
  src: url(./assets/fonts/blazed/Blazed.ttf);
}

/*
  to change the default h1 styles on tailwind

  https://tailwindcss.com/docs/preflight#extending-preflight

*/
@layer base {
  h1 {
    @apply text-6xl;
  }
}

/*tailwind and own styles*/

#firechat-font{
  font-family: "firechat";
  color:red;
}

.custom-links{
  color:red;
  font-weight: bold;
}

顺风配置文件:

module.exports = {
  content: [
    "./src/**/*.{html,ts}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

编辑:我现在看到的是，例如 mt-2 应用并出现在 devTools 上(也许问题是注意到的小变化，我的错)，但更大的余量，如 mt-4 或 mt-6没有。它也发生在其他属性上。

Answer 1

出于某种原因，在我的 styles.scss 中，我不得不按如下方式导入变量

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

代替

@tailwind base;
@tailwind components;
@tailwind utilities;

重新加载，它成功了。 Angular 版本 14.1.0，Tailwindcss 版本 3.1.7