求助：Tailwind CSS无法生成bg-black等背景类的问题

问题出在你的tailwind.config.js配置上——你直接重写了theme.colors对象，这会完全替换Tailwind自带的默认颜色体系，包括black这类基础颜色，所以bg-black类不会被生成。而grid、flex属于布局类，不受颜色配置的影响，因此能正常生成。

有两种解决方式：

方式一：保留默认颜色，合并自定义颜色 #

在theme.colors里通过扩展运算符引入Tailwind默认颜色，再添加你的自定义颜色：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html"],
  theme: {
    colors: {
      // 引入Tailwind所有默认颜色
      ...require('tailwindcss/colors'),
      transparent: "transparent",
      current: "currentColor",

      backgroundpink: {
        DEFAULT: "#faeaf5",
      },
      primarypink: {
        DEFAULT: "#eaa4b1",
      },
      vanilla: {
        DEFAULT: "#f7e6de",
      },
      accentorange: {
        DEFAULT: "#eabaa4",
      }
    },
    extend: {},
  },
  plugins: [],
}

方式二：用extend扩展颜色（推荐） #

把自定义颜色放在theme.extend.colors里，这样不会覆盖默认颜色体系：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html"],
  theme: {
    extend: {
      colors: {
        backgroundpink: {
          DEFAULT: "#faeaf5",
        },
        primarypink: {
          DEFAULT: "#eaa4b1",
        },
        vanilla: {
          DEFAULT: "#f7e6de",
        },
        accentorange: {
          DEFAULT: "#eabaa4",
        }
      },
    },
  },
  plugins: [],
}

修改配置后，重新执行CSS构建命令，bg-black类就会正常生成到output.css里了。

内容的提问来源于stack exchange，提问作者bonk