Option to use grey instead of gray

[sklawren]

It would be great if npx tailwindcss init had a flag which generated colors with grey instead of gray.

Two reasons:

1. gray with an "a" is the US spelling, but other English speaking countries use grey with an "e"
2. grey with an "e" is easier to type than gray with an "a". The letter "e" is next to "r"

Short of that, is there an easy way to accomplish this in the tailwind.config.js file?

I guess it's something like this?

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

module.exports = {
    theme: {
        colors: {
            ...colors,
            transparent: 'transparent',
            current: 'currentColor',
            blueGrey: colors.blueGray,
            coolGrey: colors.coolGray,
            grey: colors.gray,
            trueGrey: colors.trueGray,
            warmGrey: colors.warmGray,
            blueGray: undefined,
            coolGray: undefined,
            gray: undefined,
            trueGray: undefined,
            warmGray: undefined,
        },
        extend: {},
    },
};

The problem with this is that when I try to apply it in my tailwind.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    @apply bg-grey-900;
}

It complains and says that it doesn't exist

The `bg-grey-900` class does not exist, but `bg-gray-900` does. If you're sure that `bg-grey-900` exists, make sure that any `@import` statements are being properly processed before Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

[MathGeniusJodie]

I pasted your config in tailwind play and it works fine

[sklawren]

Yeah, I figured out it was an issue with a specific version of Gatsby 2.27.2 which they have fixed in 2.27.3.