How to add new colors to tailwind-css and keep the original ones?

Add your custom color values to theme > extend > colors section in tailwind.config.js

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

You can simply concatinate them using "Array/Object spread operator" (...) and gather them all in a colors variable.

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

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

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

Try this code within tailwind.config.js then restart localhost/terminal

`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: [],
 }`

You could also pick colors from the tailwind extended color palate. 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,
      },
    }
  }
}