[Feature] Supply real gray shades

[Mindexperiment]

Hey Adam,

I see from the config file there's a new awesome color palette.
What you think about defining a real gray shading other than black and white?

Thank you, keep going!!

[CvX]

Are you referring to the config on the next branch? It already has full 9-point scale, just like the other colors.

https://github.com/tailwindcss/tailwindcss/blob/next/stubs/defaultConfig.stub.js#L9-L22

Or are you thinking of something else?

[Mindexperiment]

Hi @CvX no I'm not referring to that gray shades, they are fine in the color palette but are not real gray.

I was thinking about something similar to #202020, #333, #444, #666, #888, #aaa, #ccc, #eee, #f0f0f0, some real gray shades. These can always be combined with the whole palette to build theme components

[CvX]

Alright, I get you. 🙂 Isn't the whole idea of the default color pallet to have an opinionated color set that is meant to be modified and extended as soon as you need any specific colors (in your case - neutral grays)? And wouldn't having two grayscale pallets in the default config a bit redundant?

[Mindexperiment]

Well, the provided gray scale isn't really gray it's a blue-gray scale. It's ok! 😄 and merges well with the whole palette.

I mean that if the palette aim to be a "general" set of colours it should include a natural gray scale, build with the rules of the palette, but real gray. Themes always needs grey somewhere ☀️

If you look, for example at material, there are both gray shades, bulma too has grey shades, foundation has grey, and also semanti UI use grey as natural grey

They are not redundant, one is palette specific the other is generic. 😃

[adamwathan]

We're working on some additional color palettes that you could pull in if you needed them, not sure how we are going to deliver them yet but a set of neutral grays is definitely going to be part of that.

Going to close this as no plans to add neutral gray to the base color set but we will solve this another way over the coming months for sure.

[cljnnn]

I have the same issue, the gray is little blue. I want the neutral gray. It's nice to include that.

I tried to customize theme's color in tailwind.config.js to add neutral gray by myself.
but I found all other default colors are missing. It seems like I also need to add all of them even if I just want to add this one. Is this a bug or feature?
I am using version 1 beta8.

[devcircus]

If you just want to add colors and not override all of your existing colors, use the extend property inside of theme.

[Mindexperiment]

 theme: {
   ...
   extend: {
    colors: {
     "my-color": '#d585e4'
    }
   }
}

[cljnnn]

Great, that is what I want. Thanks for help.

[Mheetu]

I agree, I feel like the true grays belong as part of having black/white... it'd complete that scale. Having to go through and copy the bluish-grays from the default config, paste them into the extend object, and go through and desaturate each one for each new project is tedious. I'll probably create a snippet for it; but shouldn't have to just to get a color that's truly between black/white.

If we later have different palettes to pull in, I'd vote for the bluish-grays have to be pulled in, not the true grays.

[hacknug]

Just shared some gray palettes I found when doing a little bit of research in #1127.

[aviemet]

Sorry to bump an old thread, I landed here from searching why there aren't actual grays defined in TailWind.

I'd like to say that I think it's a bit weird to have the gray class names be taken up by shades of blue. When I think of setting a gray color, I think of actual grays, but since the class names are taken I either have to come up with a name for a set of custom grays (besides "gray"), or override the defaults. I rather like the colors, but they're not gray and I don't think they should be called gray.

In my opinion, what's currently called "gray" should be renamed to "cyan", and a set of neutral gray colors should be defined called "gray". To me, this makes semantic, intuitive sense.

[Apostolique]

You can use the grays from here: https://tailwindui.com/documentation#how-tailwindcss-ui-extends-tailwind.

The current gray is called cool-gray.

[IAndreaGiuseppe]

Hi guys, this is the pattern I use for all my projects:

module.exports = {
    theme: {
        extend: {
            colors: {
                grey: {
                    '100': '#f5f5f5',
                    '200': '#eeeeee',
                    '300': '#e0e0e0',
                    '400': '#bdbdbd',
                    '500': '#9e9e9e',
                    '600': '#757575',
                    '700': '#616161',
                    '800': '#424242',
                    '900': '#212121',
                },
                dark: {
                    '100': '#121212',
                    '200': '#1d1d1d',
                    '300': '#212121',
                    '400': '#242424',
                    '500': '#272727',
                    '600': '#2c2c2c',
                    '700': '#2d2d2d',
                    '800': '#333333',
                    '900': '#353535',
                    '999': '#373737',
                }
            },
        }
    },
    variants: {},
    plugins: []
};

Note: english grey instead of american gray