顺风 css 不应用自定义背景颜色答案

【问题标题】：tailwind css doesn't apply custom background color顺风 css 不应用自定义背景颜色
【发布时间】：2021-10-14 02:37:24
【问题描述】：

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 格式之后我的顺风破了.它适用于边距/填充，但不适用于 bg，尽管它适用于 text-red-200

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

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

我怎么知道问题出在哪里？

【问题讨论】：

标签： tailwind-css

【解决方案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 base;
@tailwind components;
@tailwind utilities;

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

【讨论】：

【解决方案2】：

您以错误的顺序导入和声明 - 顺风在编译时遇到了一些关于 scss 排序的奇怪问题 - 因此，如果正文首先出现，它应该出现在组件之后和实用程序之前。

@import 'tailwindcss/base';
@import 'tailwindcss/components';
body {
    font-family: "DIN Alternate", sans-serif;
    font-size: 16px;
}
@import 'tailwindcss/utilities';

【讨论】：

是的，我刚刚将主体放在原处，并将顺风导入移动到顶部，它工作正常。这是一个奇怪的问题。我回到了原来的地方，但没有问题。
当我第一次使用它时，我做了和你一样的事情——我想没关系，当一个人遇到任何复杂的事情时，恕我直言，使用 scss 或 css 可能会更好。