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

Question

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

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

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

Answer 1

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

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

Answer 2

您还可以从顺风扩展调色板中选择颜色。 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,
      },
    }
  }
}

Answer 3

不幸的是，这些方法都不起作用。但我找到了一种方法，可以引导你和我实现目标。

只需在 tailwind css 配置文件中的主题对象中输入名称和自定义颜色，默认颜色将保留其名称，并且您的颜色将添加到类列表中。

示例 - 在 tailwind.config.js 中：

      module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        'main': '#e002a2',
        'second': '#47019d',
        'three': '#e00256',
        'black': '#212121',
        'white': '#ffffff',
        'gray': '#808080e2'
      }
    },
  },
  plugins: [],
}

Answer 4

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

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

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

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

Answer 5

在 tailwind.config.js 中尝试此代码，然后重新启动 localhost/terminal

// tailwind.config.js
module.exports = {
  content: ['./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: [],
}