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

Posted 2023-03-07

【中文标题】无法在 Tailwind 中添加自定义颜色

【英文标题】：Can't add custom colors in 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' 类不存在”

【参考方案1】：

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

bg-body-color : 背景颜色

text-body-color : 文本颜色

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

等等

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