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

Question

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

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

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

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

文本中心 class 有效，但 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 并不能解决它。

非常感谢。

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

styles.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

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

Answer 2

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

Answer 3

出于某种原因，在我的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 4

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

唯一的问题是两个版本之间发生了很多变化（检查这里），所以它可能会破坏许多在 v3 中正常工作的东西。

Answer 5

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

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

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

源/tailwind.scss：

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

package.json 中的新脚本，称为“顺风” - 它监视您的 HTML 的变化并重建您的 ZC7A628CBA2AE2E2EB666755Z.

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"
 }

angular.json：

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

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

Answer 6

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

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