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

Question

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

无效：

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

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

谢谢！

Answer 1

您需要在此处尝试一些操作：

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

// tailwind.config.js

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

Double-check 上述行是 content，而不是 purge

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

/* .src/styles.css */

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

Answer 2

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

Answer 3

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

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

您可以了解如何将 angular 和 tailwind css 与下面的 link 连接：

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

Answer 4

使用 Angular materials 排版将覆盖您的 Tailwind CSS 样式，因此请删除使用 material 排版并检查您的运行是否正常.

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

Tailwindcss version 3 classes not working on class attributes, but works on @apply for Angular 13

css

sass

angular

scss-mixins

tailwind-css