Tailwindcss 背景颜色未解析

Question

使用 tailwindcss 并应用背景颜色不会被解析

这是我的顺风配置

const colors = require("tailwindcss/colors");
module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      "saibaba-orange": {
        light: "#ff6426",
        DEFAULT: "#ff6426",
        dark: "#ff6426",
      },
    },

    minHeight: {
      0: "0",
      "1/4": "25%",
      "1/2": "50%",
      "3/4": "75%",
      full: "100%",
    },
    extend: {
      fontFamily: {
        sans: ["Lora", "Helvetica", "Arial", "sans-serif"],
      },
      backgroundImage: {
        "hero-pattern":
          "url('/img/banner_bg.png')",
      },
    },
  },
  variants: {
    extend: {
      backgroundColor: [
        "responsive",
        "hover",
        "focus",
        "active",
        "group-hover",
      ],
    },
  },
  corePlugins: {},
  plugins: [require("tailwindcss"), require("precss"), require("autoprefixer")],
};

例如在 html 中使用背景类将不会产生任何输出。检查 DOM 没有对 CSS 类的引用。

<div class="bg-blue-500"></div>

Answer 1

您正在覆盖 theme.colors 中的默认颜色。您需要将自定义颜色移动到扩展中。