如何为tailwind-css添加新颜色并保留原始颜色？答案

【问题标题】：How to add new colors to tailwind-css and keep the original ones?如何为tailwind-css添加新颜色并保留原始颜色？
【发布时间】：2021-01-18 09:22:33
【问题描述】：

如何为默认方案添加颜色？这是我的 tailwindcss 文件。

const { colors: defaultColors } = require('tailwindcss/defaultTheme')

module.exports = {
    "theme": {
        "colors": defaultColors + {
            "custom-yellow": {
                "500": "#EDAE0A",
            }
        },
    },
};

【问题讨论】：

@'Melis Lekesiz' consider changing your answer. @victoryoaill answer is the one used in the Tailwind documentation.

标签： tailwind-css

【解决方案1】：

将自定义颜色值添加到 tailwind.config.js 中的主题 > 扩展 > 颜色部分

//tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        colors: {
          'custom-yellow':'#BAA333',
        }
      },
    },  
  }

【讨论】：

在我的情况下，我已经重新启动了服务器，然后只在 UI 中反映了变化
这应该是公认的答案
这更容易，也可能是正确的方法。

【解决方案2】：

您可以使用“数组/对象扩展运算符”（...）简单地将它们连接起来，并将它们全部收集到一个 colors 变量中。

// tailwind.config.js
const { colors: defaultColors } = require('tailwindcss/defaultTheme')

const colors = {
    ...defaultColors,
    ...{
        "custom-yellow": {
            "500": "#EDAE0A",
        },
    },
}

module.exports = {
    "theme": {
        "colors": colors,
    }
};

【讨论】：

虽然这可行，但我不确定为什么扩展方式不再适用于顺风编译器和 vscode 扩展。
@AbdallaArbab 从理论上讲，extend 也应该可以工作，但是这个更核心的 nodejs。大部分时间应该可以工作。

【解决方案3】：

试试这个代码然后重启 localhost

`module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend:
    {colors: 
     {
    pinkSoft: '#EDC7B7',
    wheat: '#EEE2DC',
    gray: '#BAB2B5',
    blue: '#BADFE7',
    blue2: '#697184',
    pink: '#D8CFD0',
    bg: '#B1A6A4',
    bgDark: '#413F3D',
  },},
},
variants: {
extend: {},
 },
plugins: [],
 }`

【讨论】：

【解决方案4】：

您还可以从顺风扩展的色阶中挑选颜色。 https://tailwindcss.com/docs/customizing-colors#color-palette-reference

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    extend: {
      colors: {
          orange: colors.orange,
      },
    }
  }
}

【讨论】：