Tailwindcss: tailwind.config.js overrides and doesn't append (1.0.0-beta.8)

[NoahBres]

I am attempting to override a color in tailwind and when I do so, none of the colors (except the defined one) are generated.
My tailwind.config.js generated with npx tailwind init

module.exports = {
  theme: {
    colors: {
      black: "#1e1e2f"
    }
  },
  variants: {},
  plugins: []
};

However, this config wipes out the rest of the colors. For example, when I write a simple <h1 class="text-white bg-black">Test</h1>, there is no css selector for .text-white. bg-black works as it is the only one overridden.
When I leave tailwind.config.js blank, the proper selectors are present.
My workaround right now is to simply generate an npx tailwind init --full

I don't believe this is the intended behavior?

[MichaelDeBoey]

Hey @NoahBres!

You should use the extend key in your config 🙂
More info can be found in the docs

module.exports = {
  theme: {
    extend: {
      colors: {
        black: '#1E1E2F',
      },
    },
  },
  variants: {},
  plugins: [],
};

[NoahBres]

Wow that was a simple fix. I don't know how I skipped that entire section in the docs. Thank you so much!

[NoahBres]

I believe I skipped over that section because I was looking at the colors page under customization. I didn't even think to look at theme. Would it be possible to add the extend example in the colors page?

[adamwathan]

Yeah the color customization docs are basically not even started, going to work on those today. Good idea to re-explain the extend feature there as well 👍

[CvX]

Let me throw in some ideas: 🙂

1. Add the extend: {} section to the default minimal config, to better expose that functionality to people who want to only skim the docs and jump straight into the config.
2. Add two short comments to that default config: "here go overrides" and "here you extend the defaults"
3. (this one is maybe in the "too much" category? 😉) Change the config to be more explicit about what's and override and what's an extension, e.g.:

{
  theme: {
    override: {
      // everything that would be directly in "theme" before, goes here
    },
    extend: {}
  }
}

That wouldn't necessary need to be a breaking change. The override could be merged into the theme, so the change would be minimal in the tailwind, and existing 1.0 beta configs would remain valid.

[adamwathan]

Yeah good ideas, I like option 1 as a minimal improvement at least so I've already pushed that 👍 Let's just roll with that for now and see how it affects the frequency this question pops up then maybe we can take more drastic measures 😅