CODEWITHSUNDEEP
next.jstailwind-css
sodiumfish
sodiumfish

Reputation: 79

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

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: [],
};

Upvotes: 5

Views: 2365

Answers (1)

juliomalves
juliomalves

Reputation: 50418

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

Upvotes: 7

Related Questions