Tailwindcss 版本 3 类不适用于类属性，但适用于 @apply for Angular 13答案

【问题标题】：Tailwindcss version 3 classes not working on class attributes, but works on @apply for Angular 13Tailwindcss 版本 3 类不适用于类属性，但适用于 @apply for Angular 13
【发布时间】：2022-05-01 10:26:38
【问题描述】：

我无法让 Tailwindcss 类出现在内联“类”属性中。但是，如果我 @apply 我通过“.scss”文件并在内联“类”属性上使用该类，它就可以正常工作。

不起作用：

.HTML

<!-- Tailwindcss NOT working -->
<div class="bg-red-500">
    <h1 class="text-9xl">HELLO</h1>
</div>

工作： .scss

.bg {
     @apply bg-green-500;
   }

.text {
      @apply text-9xl text-red-500;
    }

.HTML

<!-- Tailwindcss working -->
    <div class="bg-red-500">
        <h1 class="text-9xl">HELLO</h1>
    </div>

我错过了什么吗？提前感谢帮助！

谢谢！

【问题讨论】：

tailwind.config 的 content 属性中有什么？
面临同样的问题，我在配置文件中有一个内容属性。
还有人找到解决方案吗？
就我而言，这只是我在 tailwind.config.js 中的内容路径中的一个愚蠢错误。作为tailwind.config.js，它位于src 文件夹之外。所以我只写了完整的路径并修复了它。

标签： css angular sass tailwind-css scss-mixins

【解决方案1】：

您需要在这里尝试一些事情：

首先，确保配置文件中的内容设置正确：

// tailwind.config.js

module.exports = {
  content: ["./src/**/*.{html}"], //configure this line as you see fit
  theme: {
    extend: {},
  },
  plugins: [],
}

仔细检查上述行是content，而不是purge

如果设置正确，请确保您正确导入了顺风。在您的 CSS 文件中，将这些规则添加到顶部，并确保 CSS 文件正确：

/* .src/styles.css */

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

【讨论】：

【解决方案2】：

就是这样。确保 content 在您的顺风配置文件中是正确的。当我更新这个时，原来我创建的一个新文件夹没有包含在配置中，所以 tailwind 无法读取它。

【讨论】：

【解决方案3】：

您必须配置您的模板路径，将路径添加到您的tailwind.config.js 文件中的所有模板文件。

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

您可以通过以下链接了解如何连接 angular 和 tailwind css：

https://tailwindcss.com/docs/guides/angular

【讨论】：

【解决方案4】：

使用 Angular 材质排版会覆盖您的 Tailwind CSS 样式，因此请移除使用材质排版并检查它是否可以正常运行。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。