Tailwindcss 背景顏色未解析

Question

使用 tailwindcss 並應用背景 colors 沒有被解析

這是我的順風配置

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 中使用背景 class 將不會產生任何 output。 檢查 DOM 沒有提到 CSS class。

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

Answer 1

您正在覆蓋您的 theme.colors 中的默認 colors。 您需要將自定義 colors 移動到擴展中。