Question

我正在尝试添加自定义颜色：

extend: {
  colors: {
    'body-color': '#525B73'
  }
}

这会破坏编译，并显示有关内置 Tailwind 类不存在的错误：

<块引用>

bg-white 类不存在。

也试过color: { bodyColor: '#525B73' }，无果。如果我删除自定义颜色，此错误就会消失。怎么回事？

以下是我的配置文件的简化版本：

module.exports = {
  purge: [
    './components/**/*.vue',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.js'
  ],
  theme: {
    fontFamily: {
      'intro-black': ['intro-black', 'sans-serif']
    },
    container: {
      maxWidth: {
        lg: 'none'
      },
    },
    extend: {
      colors: {
        'body-color': '#525B73'
      },
      fontSize: {
        '30': '30px'
      },
      lineHeight: {
        '40': '40px'
      },
      height: {
        '60': '60px'
      },
      margin: {
        '100': '100px'
      },
      padding: {
        '40': '40px'
      },
      borderWidth: {
        '6': '6px'
      },
      zIndex: {
        '20000': '20000'
      },
      boxShadow: {
        '25': '0 0 20px rgba(0, 0, 0, 0.25)'
      },
      borderRadius: {
        '8': '8px'
      }
    }
  }
}

编辑：根据@BoussadjraBrahim 的评论，我更新到 Tailwind 2.x，它用一个不存在的“'body-color' 类不存在”的小问题代替了主要的编译问题。

Answer 1

当您添加自定义颜色时，它将应用于任何可着色属性，如背景、文本、边框和渐变...，因此如果您定义名为 body-color 的颜色，它将作为 :

bg-body-color : 用于背景颜色

text-body-color : 文字颜色

border-body-color : 边框颜色

等等

我建议使用合适的名称，例如 primary 或 blue-gray 而不是 body-color

无法在 Tailwind 中添加自定义颜色

1 个答案: