All colors are missing after overriding or extending theme.colors

[menecio]

What version of Tailwind CSS are you using?

3.1.5

What version of Node.js are you using?

Node v16.16.0

Describe your issue

I used the Tailwindcss CLI method to setup my project.

So I'm trying to theme Tailwindcss following the example documentation from here, the problem is that even if I try the code snippet from the example, when I run npx tailwindcss -i src/static/css/tailwind.css -o src/static/css/main.css , the resulting css file doesn't contain any color related classes.

I also tried my own tailwind.config.js and I can't see my new color added.

Overriding:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/templates/**/*.html}", "./src/static/js/*.js"],
  theme: {
    colors: {
        'verde': '#04DfBE'
      },
    extend: {},
  },
  plugins: [],
}

Extending

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/templates/**/*.html}", "./src/static/js/*.js"],
  theme: {
    extend: {
      colors: {
        'verde': '#04DfBE'
      },
    },
  },
  plugins: [],
}

Neither of those will produce the classes including "verde" to be used in my theme.

Am I missing something or is this a bug?

[thecrypticace]

Hey, can you provide more details on how you're using the utilities or a reproduction I can look at? I created a Tailwind Play here and everything is working as expected: https://play.tailwindcss.com/mQFbw9PkFs

[menecio]

Hi @thecrypticace, let me try to elaborate more:

1. I installed tailwind using npm as indicated in the docs
2. Then I configured the tailwind.config.js to add some colors to my tailwind setup
3. Finally I compiled my css file using npx following the tailwind CLI method from the docs.

I also found that if I use this same configuration with the CDN method, that means adding the CDN script in my HTML file and use the same configuration, then it works.

If I use the npm install method the configuration doesn’t work and all colors are missing, not just the one I tried to add.

[menecio]

I finally found the reason, as at that point I wasn't using any of the classes yet, tailwindcss-cli was not adding the classes into the compiled .css file.

[menecio]

I wasn't using any of the classes I was adding into my theme, when tailwindcss-cli compiles the css file it won't include unused classes, this is to make the smallest bundle possible.

Once I started using the classes in my html files and retried it was all ok.

From the docs:

Tailwind CSS is incredibly performance focused and aims to produce the smallest CSS file possible by only generating the CSS you are actually using in your project.