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

【问题标题】：Many Tailwind CSS classes doesn´t work on my Angular 12 project许多 Tailwind CSS 类不适用于我的 Angular 12 项目
【发布时间】：2022-08-22 21:37:06
【问题描述】：

我正在开发一个安装了 Tailwind CSS 的 Angular 12 项目。我关注了official docs，似乎一切正常；但我不明白为什么有些课程有效而其他课程无效。

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

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

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

文本中心类有效，但 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。

你知道会发生什么吗？

像建议的here 那样重新安装 node_modules 并不能解决它。

非常感谢。

我添加了 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 这样的较大边距不会.它也发生在其他属性上。

分享 style.scss 你添加了 tailwind 和 tailwind 配置文件的地方
@zainhassan 谢谢，完成了。它没有添加到任何 scss 文件中，而是添加到项目的全局 style.css 中。
你能看到 mt-2 在 devTools 中应用于你的 div 吗？
这很奇怪，但是您似乎已经使用 angular12 安装了最新版本的顺风，也许它有问题？是否可以安装tailwind v2并快速检查它是否有效。
@FranP 发布了我的答案。很高兴它有帮助

标签： css angular tailwind-css

【解决方案1】：

看来您已经安装了最新版本的 angular 12 的 tailwind 可能有问题？尝试安装tailwind v2，看看它是否有效。自tailwind v3以来可能会发生一些重大变化

【讨论】：

此外，正如@penleychan 添加的那样，升级 angular 是一个好主意，然后它会更好地与 Tailwind v3 一起使用

【解决方案2】：

查看本教程：https://medium.com/tunaiku-tech/angular-11-tailwindcss-2-0-blazing-fast-cfa20ae3a5e9。在该教程中，使用了 TailwindCSS 版本 2。如果您想要 TailwindCSS 版本 3，请更改配置文件以匹配 TailwindCSS 版本 3 配置文件。通过设置上述教程中提到的角度项目，TailwindCSS 版本 3 工作正常。

【讨论】：

【解决方案3】：

出于某种原因，在我的样式.scss，我必须按如下方式导入变量

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

代替

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

重新加载，它工作。 Angular 版本 14.1.0，Tailwindcss 版本 3.1.7

【讨论】：

【解决方案4】：

感谢@MaksatRahmanov，我找到了解决方案。看来问题是我用 Angular 12 安装了最新的 Tailwind 版本（v3）。我切换回 v2，一切正常。

唯一的问题是两个版本（check here）之间发生了许多变化，因此它可能会破坏许多在 v3 中正常工作的东西。

【讨论】：

在进入 v2 工作时，您将使用 JIT（如果您正在使用它）作为实验阶段，并且可能必须设置 TAILWIND_MODE=watch，v3 是它正式发布的时间。 JIT 在 v3 上默认开启，这是一个已知问题，已在 angular@13.2 和 tailwind@3.0.17 中修复。如果可以的话，我建议升级到 Angular。
@penleychan 是的，你是对的，升级 Angular 工作了，现在看来事情没有工作（比如mt-6）现在可以使用 v3 :) 非常感谢

【解决方案5】：

这也发生在我身上。我检查了我的tailwind.config.js 很多次，并且

content: [    
"../src/**/*.html"
]

...应该足够了。但由于某种我不知道的原因，它只是不会在添加新类时重建。所以，和你一样，我没有在构建的 CSS 文件中看到新的类。我几乎放弃了，但最后这是我的解决方法：

源/tailwind.scss：

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

package.json 中的新脚本，称为“tailwind” - 它监视 HTML 中的更改并重建您的 css。

postcss.config.js：

module.exports = {
plugins: {
    tailwindcss: {},
    autoprefixer: {},
    }
}

还安装了 npm-run-all，所以我可以在“npm run start”上服务并观察顺风的变化：

"scripts": {
"ng": "nx",
"serve": "ng serve --configuration=dev",
"start": "npm-run-all --parallel serve tailwind",    
"tailwind": "npx tailwindcss --postcss -i ./src/tailwind.scss -o ./src/app/scss/tailwind.css --watch"
 }

角.json：

"styles": [
            "src/app/scss/tailwind.css"
          ]

你去吧。每当将新类添加到您的 HTML 文件中时，您都将提供和重建 CSS。我知道这是一种解决方法，但至少它可以 100% 工作。

【讨论】：