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

【问题标题】：Can't add custom colors in Tailwind无法在 Tailwind 中添加自定义颜色
【发布时间】：2021-06-24 18:40:15
【问题描述】：

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

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' 类不存在”问题替换了主要编译问题。

【问题讨论】：

我已经在我的项目中试用过了，效果很好
您使用的是哪个版本的顺风？
不确定如何检查，在我的package.json 我看到"@nuxtjs/tailwindcss": "^3.4.2"
"@nuxtjs/tailwindcss": "^3.4.2" 基于tailwind v1.x 和`"@nuxtjs/tailwindcss": "^4.0.1" 基于tailwind 2.x，尝试升级，可能是配置问题
感谢@BoussadjraBrahim！我相应地更新了（我也必须更新 Nuxt）。现在我在定义我的自定义颜色时没有收到错误。但是我仍然无法使用我的颜色，就好像我尝试收到此错误一样：“'body-color' 类不存在”

标签： vue.js nuxt.js tailwind-css

【解决方案1】：

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

bg-body-color : 背景颜色

text-body-color : 文本颜色

border-body-color : 用于边框颜色

等等

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

【讨论】：