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

Posted 2023-03-07

【中文标题】顺风 css 不应用自定义背景颜色

【英文标题】：tailwind css doesn't apply custom background color

【发布时间】：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 上的最后一次提交，它仍然坏了

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

【参考方案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 可能会更好。