Gray Color Scheme for Tailwind CSS

I have already wrote an article about how powerful Tailwind CSS is. One of the reasons for this is the simple consistency and adaptability. A good example of this is the management of colors.

Here is an example:

 <button class="bg-black text-white uppercase border-2 border-white">text</button> 

Even if you’ve never worked with Tailwind before, you can imagine how this button will look like. It is a button with the content “text”, the font is white, the background is black and it is surrounded by a white border.

I can use the existing color scheme for borders, text, backgrounds and more. In addition there are shades for the colors. Pink-100 for example is brighter than Pink-200.

The exact color code of each class is defined in the configuration file (if you don’t want to use the standards). So you only have to change the color value at one place in the code to use it everywhere.

This feature is especially useful if you do not have a clear idea of the color tones at the beginning of the project. An example would be a dark red error button. I would then assign bg-red-500 to this button. Whether #F11B2B or #FF2600 looks better in the final design is specified in my tailwind.config.js. The change is then applied to the complete code, so that the frame around the error message has the same color. So there is only one source of truth and you can reduce the search for inconsistencies to a minimum.

As I said, Tailwind comes with a standard set of colors. Personally, I don’t like the greys so much. But as I said, this can be quickly adjusted. In addition, I can transfer these adjustments directly into a new project and don’t have to enter them each time.

To change the color palette for the gray tones in Tailwind, add this code to tailwind.config.js.

module.exports = {
  theme: {
    extend: {
      colors: {
        gray: {
          '100': '#F8F8F8',
          '200': '#E0E0E0',
          '300': '#C8C8C8',
          '400': '#888888',
          '500': '#707070',
          '600': '#505050',
          '700': '#383838',
          '800': '#282828',
          '900': '#101010',
        }
      }
    }
  }
}

Already done. Of course, this can be applied to all shades in Tailwind. The changes apply to any use of a color with a corresponding value, be it text color or background color. More information can be found in the good documentation of Tailwind.