Tailwind not implementing color additions - reactjs

Question

I'm trying to use Tailwind in my project and I can get different styles to work, e.g. bold, round, flex, etc. However, none of the colors are coming through and I'm not sure why. I'm eventually hoping to use custom colors but that's not working either.
postcss.config.js
module.exports = {
plugins: [require('tailwindcss'), require('autoprefixer')]
};
tailwind.config.js
const colors = require('tailwindcss/colors')
module.exports = {
content: [
'./pages/**/*.{html,js}',
'./components/**/*.{html,js}',
'./index.html'
],
theme: {
colors: {
white: '#ffffff',
blue: {
medium: '#005c98'
},
black: {
light: '#005c98',
faded: '#00000059'
},
gray: {
base: '#616161',
background: '#fafafa',
primary: '#dbdbdb'
}
}
}
};
Styles I'm trying to apply to my button:
className={`bg-blue-500 text-black w-full rounded h-8 font-bold
${isInvalid && 'opacity-50'}`}
package.json dev dependencies
"devDependencies": {
"autoprefixer": "^10.4.8",
"eslint": "^6.3.0",
"eslint-loader": "^3.0.0",
"npm-run-all": "^4.1.5",
"postcss-cli": "^10.0.0",
"prop-types": "^15.8.1",
"tailwindcss": "^3.1.7"
}

Answer 1

You are overriding all of the default colors in your tailwind.config.css. If you want to keep the defaults and add a few new colors, you should use the extend property.
module.exports = {
content: [
"./pages/**/*.{html,js}",
"./components/**/*.{html,js}",
"./index.html",
],
theme: {
extend: {
colors: {
white: "#ffffff",
blue: {
medium: "#005c98",
},
black: {
light: "#005c98",
faded: "#00000059",
},
gray: {
base: "#616161",
background: "#fafafa",
primary: "#dbdbdb",
},
},
},
},
};