Tailwind CSS 不应用自定义背景颜色

Question

module.exports = {
  purge: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./layout/**/*.{js,ts,jsx,tsx}",
    "./const/**/*.{js,ts,jsx,tsx}",
    "./fonts/**/*.{js,ts,jsx,tsx,ttf}",
    "./utils/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: false,
  theme: {
    extend: {
      colors: {
        "brand-green": "#4DF69B",
        "brand-amber": "#FF8656",
        "brand-red": "#FF5656",
        "brand-gray": "#7E7E7E",
      },
      width: {
        content: "fit-content",
      },
      top: {
        20: "5rem",
      },
      fontFamily: {
        DINAlternate: ["DINAlternate", "sans-serif"],
      },
    },
  },
  variants: {
    extend: {
      borderWidth: ["hover"],
      textColor: ["group-focus"],
    },
  },
  plugins: [],
};

我的配置。

我将 next.config.js 更改为 next.config.ts，然后它告诉我它应该具有 .js 格式，我重写了它，正如我所想，在我尝试将每个文件移至 .ts 格式后，我的顺风车断了。它适用于 margins/paddins，但不适用于 bg，尽管它适用于 text-red-200

如果我检查元素，我可以看到 bg-brand-red 类，但它只是不应用它们。它运行良好，但在我重构代码后，它崩溃了，但是一旦我将所有内容重置为上一次提交，我仍然遇到背景颜色不起作用的问题。

这很奇怪，因为它工作过一次，5 分钟后就坏了，即使我回滚到 github 上的最后一次提交，它仍然坏了

我怎样才能知道问题是什么？

Answer 1

在我导入的全局 css 文件中：

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

我将这段代码移至 body{...} 下面，现在一切正常

body {
    font-family: "DIN Alternate", sans-serif;
    font-size: 16px;
}

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

首先，您应该检查是否发生相同的错误是如何导入 tailwind css

我将正文移至底部，因为字体不起作用，但它起作用了。奇怪的问题。我认为 Tailwind 只是需要更新 UPD 的样式：

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

body {
    font-family: "DIN Alternate", sans-serif;
    font-size: 16px;
}