Tailwind not implementing color additions

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" }

Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community
– Community Bot, Commented Aug 4, 2022 at 8:05

Ed Lucas · Accepted Answer · 2022-08-04 20:18:57Z

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", }, }, }, }, };

Collectives™ on Stack Overflow

Tailwind not implementing color additions

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related