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 {
    font-family: "DIN Alternate", sans-serif;
    font-size: 16px;
}

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

如果发生同样的错误，首先要检查的是导入 tailwind 的方式 css

我将正文移到了底部，因为字体不起作用，但它起作用了。奇怪的问题。我认为 tailwind 只需要在样式上进行一些更新更新：

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

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

Answer 2

您以错误的顺序导入和声明 - tailwind 在编译时有一些关于 scss 排序的奇怪问题 - 所以如果 body 首先它应该在组件之后和实用程序之前。

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

Answer 3

您可以执行以下操作：

改变tailwing.config.js

content: [
    "./resources/**/*.blade.php", 
    "./resources/**/*.js",
    "./resources/**/*.vue",
]

至此

content: [
    "./resources/**/*.blade.php",
    "./resources/**/**/**/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
],

最后运行下面的命令

npm run dev

tailwind css 不应用自定义背景颜色

tailwind css doesn't apply custom background color

tailwind-css