Nothing color-related working in TailwindCSS

December 25, 2022

I am trying to use tailwind css within my ReactJS project and every styling (justify, padding, etc.) is working just fine. But as soon as I try to apply any color, nothing seems to work. I even copied the examples from the docs and even they don’t work. It is probably a config problem but I am not able to find it.

My code:

tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    colors: {},
    fontFamily: {
      serif: ["Cormorant"],
    },
    extend: {},
  },
  plugins: [],
};

Home.tsx

export default function Home() {
  return (
    <div>
      <Background />
      <p className="text-sky-400">The quick brown fox...</p>
      <div className="bg-gradient-to-r from-cyan-500 to-blue-500 "></div>
    </div>
  );
}

The result:

>Solution :

Setting the colors property in theme will overwrite the default colour palette. Remove colors: {} from your tailwind config and the colors should work. You can read more about it here in the docs Customizing Colors.

Updated config below:

/** @type {import('tailwindcss').Config} */
    module.exports = {
      content: ["./src/**/*.{js,jsx,ts,tsx}"],
      theme: {
        fontFamily: {
          serif: ["Cormorant"],
        },
        extend: {},
      },
      plugins: [],
    };

If you need to use custom colors you can use the extend property like below. This will keep the default colors as well as adding additional colors.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        brown: {
          50: '#fdf8f6',
          100: '#f2e8e5',
          200: '#eaddd7',
          300: '#e0cec7',
          400: '#d2bab0',
          500: '#bfa094',
          600: '#a18072',
          700: '#977669',
          800: '#846358',
          900: '#43302b',
        },
      }
    },
    fontFamily: {
      serif: ["Cormorant"],
    },
    extend: {},
  },
  plugins: [],
};