许多 Tailwind CSS 类不适用于我的 Angular 12 项目

Question

我正在开发一个安装了 Tailwind CSS 的 Angular 12 项目。我遵循了官方文档，似乎一切正常；但我无法理解为什么有些课程有效而其他课程无效。

\n

例如，我可以使用这段代码，尝试在我的 div 上添加两个 Tailwind 类：

\n

<div class="text-center mt-2">\n\n    <h2>Please go back to <a class="custom-links" href="./login">login</a></h2>\n</div>\n

\n

text-center 类可以工作，但 mt-2 不能\xc2\xb4t。整个项目都在发生这样的事情。我解决这个问题的方法是使用传统的 CSS 或将其与 Tailwind 混合，如下所示：

\n

<div id="back-to-login" class="text-center">\n\n    <h2>Please go back to <a class="custom-links" href="./login">login</a></h2>\n</div>\n

\n

在CSS上：

\n

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

\n

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

\n

你知道会发生什么吗？

\n

像这里建议的那样重新安装node_modules并不能解决这个问题。

\n

多谢。

\n

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

\n

样式.css

\n

/* You can add global styles to this file, and also import other style files */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@font-face {\n  font-family: "firechat";\n  src: url(./assets/fonts/blazed/Blazed.ttf);\n}\n\n/*\n  to change the default h1 styles on tailwind\n\n  https://tailwindcss.com/docs/preflight#extending-preflight\n\n*/\n@layer base {\n  h1 {\n    @apply text-6xl;\n  }\n}\n\n/*tailwind and own styles*/\n\n#firechat-font{\n  font-family: "firechat";\n  color:red;\n}\n\n.custom-links{\n  color:red;\n  font-weight: bold;\n}\n

\n

顺风配置文件：

\n

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

\n

编辑：我现在看到的是，例如 mt-2 适用并出现在 devTools 上（也许问题是注意到的小变化，我的错），但像 mt-4 或 mt-6 这样的更大边距不会\xc2 \xb4t。其他房产也发生过这种情况。

\n

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

Answer 2

Angular 14 尝试这样的tailwind.config.js

/** @type {import('tailwindcss').Config} */
  module.exports = {
  content: ['./src/**/*.{html,ts}', './projects/**/*.{html,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
 }

Answer 3

您似乎已经安装了最新版本的 tailwind 和 Angular 12，也许有问题？尝试安装 tailwind v2 并查看是否有效。自 Tailwind v3 起可能会发生一些重大变化