CODEWITHSUNDEEP
reactjstailwind-css
willpratt78
willpratt78

Reputation: 21

Tailwind not implementing color additions

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

Upvotes: 1

Views: 502

Answers (1)

Ed Lucas
Ed Lucas

Reputation: 7305

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

Upvotes: 1

Related Questions