Can't get custom colors working via "theme.extend"

[leo-petrucci]

Hi all,

Currently using Tailwind with Next.js, installed with the official guide. I followed the documentation page to[ extend my colors](const colors = require('tailwindcss/colors')), this is how my config looks:

const colors = require('tailwindcss/colors');

module.exports = {
  purge: ['./pages/**/*.tsx', './components/**/*.tsx'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      emerald: colors.emerald,
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Despite this I can't seem to get bg-emerald-* doesn't seem to be working.

Any idea what this could be caused by? The process seems really simple so I'm struggling to think of what the problem could be.

[leo-petrucci]

Nevermind I'm an idiot.

[simonswiss]

Haha, glad you got it sorted 😅

[simonswiss]

Hello! 👋

Looks like you're missing the colors key in your extend:

const colors = require('tailwindcss/colors');

module.exports = {
  purge: ['./pages/**/*.tsx', './components/**/*.tsx'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
+      colors: {
        emerald: colors.emerald,
+      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

That should do it 👍