Configuring colors in Tailwind in Next.js project broke all colors

user_15106312 0
Viewed 632

I am using TailwindCSS for the first time, and that in a Next.js project. I followed their docs on "how to use tailwind with Nextjs" and tried adding colors in the tailwind.config.js, but it ended up breaking all colors. Other styles work.

I watched a YouTube video on Tailwind, but the guy was using it on regular HTML/CSS project. He outputted the file in a public/styles.css by running tailwindcss build styles/globals.css -o public/styles.css but I am using styles/globals.css in Next.js by following the docs.

My tailwind.config.js file:

module.exports = {
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
    colors: {
     //ADDED THIS
      white: {
        0: "#fff",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};
tailwind-css next.js
1 Answers

Using theme.colors to add new colors will fully overwrite the default Tailwind color palette.

Either you define all the colors that you want to use in theme.colors explicitly.

const colors = require('tailwindcss/colors')

module.exports = {
    //...
    theme: {
        colors: {
            black: colors.black,
            // Define all desired colors
            white: "#fff"
        }
    },
    //...
};

Or, if you still want to have access to all the default colors and simply need to extend them, use theme.extend.colors instead.

module.exports = {
    //...
    theme: {
        extend: {
            colors: {
                white: "#fff"
            }
        }
    },
    //...
};
user_18707800
Related