[Feature Proposal] - Mono gray palette

[jenstornell]

I've looked at the colors in https://tailwindui.com/documentation#how-tailwindcss-ui-extends-tailwind and they look great. I'm looking forward to see them in a future version of Tailwind.

There are two gray palettes but no "real" gray.

I added a mono palette into the mix

I've removed the blue from the new default palette as a new "Mono gray".

Because it's completely gray, it will fit well with every other color in the other palettes.

Suggested name

For example bg-mono-500 and text-mono-500 sounds good to me. The name mono is short and descriptive.

What do you think? Would it be a good native feature or is it better to let the user create it as a custom config?

[alvinkonda]

I think the naming like Material design is more descriptive. So, the current gray color should be named blue-gray and then should be provided another palete for the gray color, which of course should be just gray.

[kylecordes]

I also found this surprising. Out-of-the-box, the thing called gray is pretty far from pure gray. You can purchase an add-on which has something closer to pure gray in the box, but still not. My naive expectation of a utility CSS kit was to contain a broad variety of useful colors, including the most boring and obvious of all, shades of un-tinted gray. I'm sure it will turn out to be straightforward to add such a color set in the configuration, so this will be a minor speedbump.

[jenstornell]

I couldn't wait for this feature to be implemented by default, so I added it as an extend to my config file. The colors in my palette below are identical to my screenshot in my initial post above.

I call it mono to not conflict with the current gray palette.

module.exports = {
  theme: {
    extend: {
      colors: {
        'mono-50': '#fbfbfb',
        'mono-100': '#f7f7f7',
        'mono-200': '#ebebeb',
        'mono-300': '#dcdcdc',
        'mono-400': '#b2b2b2',
        'mono-500': '#808080',
        'mono-600': '#636363',
        'mono-700': '#515151',
        'mono-800': '#3f3f3f',
        'mono-900': '#2e2e2e',
      }
    },
  },
};

[mnaderian]

This should be like this:

module.exports = {
  theme: {
    extend: {
      colors: {
        'mono': {
          '50': '#fbfbfb',
          '100': '#f7f7f7',
          '200': '#ebebeb',
          '300': '#dcdcdc',
          '400': '#b2b2b2',
          '500': '#808080',
          '600': '#636363',
          '700': '#515151',
          '800': '#3f3f3f',
          '900': '#2e2e2e',
        }
      }
    },
  },
};

[jenstornell]

You are right, it's possible to do it like that. In fact, both ways will work.

If we want to be nitpicky, I think we can remove the ' as well.

module.exports = {
  theme: {
    extend: {
      colors: {
        mono: {
          '50': '#fbfbfb',
          '100': '#f7f7f7',
          '200': '#ebebeb',
          '300': '#dcdcdc',
          '400': '#b2b2b2',
          '500': '#808080',
          '600': '#636363',
          '700': '#515151',
          '800': '#3f3f3f',
          '900': '#2e2e2e',
        }
      }
    },
  },
};

[iruoy]

In TailwindCSS 2.0 there'll be a new color pallette with 5 different types of gray. There'll be warmGray, trueGray, gray, coolGray and blueGray.

trueGray is pretty much what you're looking for and gray is very close to it.

Have a look at the actual values here: https://github.com/tailwindlabs/tailwindcss/blob/master/colors.js

[jenstornell]

This looks brilliant! trueGray is what I'm looking for. Thanks! 👍

To see the colors in this list, I've found a nice tool. Just paste the javascript object in here.

http://colorhound.net/

[simonswiss]

I just read the original post in this thread without seeing the 170 days ago badge, and I was like "hang on, isn't that exactly trueGray? 😅

[jenstornell]

@simonswiss Yes, it's an old post. Maybe I was the first one to request a completely gray palette, I don't know. No matter what, I think we will have some great palettes in 2.0. 😄

[simonswiss]

Haha you can take the credit for it 🎉

[deadcoder0904]

@simonswiss I want to use blueGray. Do I need to add it to Tailwind Config or are all grays included by default?

I have Tailwind Intellisense installed but it gives suggestions for only 1 gray so I think it only supports Tailwind 1.0 & not 2.0

Edit: Just added blueGray in the config & it started working. Even Intellisense picks up properly 😍

Although I do think it needs to be mentioned somewhere that you need to add it to the config 👍

[adamwathan]

Hey! Make sure you read the documentation on customizing colors, it's all explained:

https://tailwindcss.com/docs/customizing-colors