How to expand tailwind colors to fit your design system needs

Introduction

Tailwind is my go-to CSS framework. This framework makes it very easy to use colors in your project without touching hex-code. Tailwincss is shipped with an out-0f-the-box color palette with 22 colors that have 10 variants. That is just enough functionality if you not working on a custom project. However, in some cases, you have to use specific colors for brand consistency or you just feel adventurous. Also if you are building a design system, you might want to configure your colors using naming conventions such as success, warning, error, and all of that. So, this is how you do it. Go to your config file:

module.exports = {
  theme: {
    colors: {},
  },
}

This article assumes you already have TailwindCSS installed and configured in your project.

Step 1: Define your custom colors

First, you need to define the colors that you want to use in your design system. You can create a separate file for your colors, or you can define them directly in your Tailwind configuration file. If you are using a separate file, make sure to import it into your configuration file. Let's say you want to add a custom brand color named 'brand', a success color, a warning color, and an error color. You can define them in your colors object like this:

module.exports = {
  theme: {
    colors: {
      brand: {
        100: '#E0F2F1',
        200: '#B2DFDB',
        300: '#80CBC4',
        400: '#4DB6AC',
        500: '#26A69A',
        600: '#009688',
        700: '#00897B',
        800: '#00796B',
        900: '#00695C',
      },
      success: '#4CAF50',
      warning: '#FFC107',
      error: '#F44336',
    },
  },
};

**Step 2: Extend the default colors**
If you want to keep the default Tailwind colors and just add your custom colors to them, you can use the extended property inside the theme object.
jsCopy codeconst colors = require('tailwindcss/colors');

```js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          100: '#E0F2F1',
          // ...
          900: '#00695C',
        },
        success: '#4CAF50',
        warning: '#FFC107',
        error: '#F44336',
      },
    },
  },
};

Step 3: Use your custom colors in your CSS

Now that you have defined your custom colors, you can use them in your CSS just like you would use any other Tailwind color.

For example:

<button class="bg-brand-500 text-white">Brand Button</button>
<p class="text-success">Success Message</p>
<p class="text-warning">Warning Message</p>
<p class="text-error">Error Message</p>

Step 4: Add variants If you need additional variants for your custom colors (e.g., hover or focus states), you can add them to the variants property in your Tailwind configuration file.

module.exports = {
  theme: {
    // ...
  },
  variants: {
    backgroundColor: ['responsive', 'hover', 'focus', 'active'],
    textColor: ['responsive', 'hover', 'focus', 'active'],
  },
}

This will generate additional classes for your custom colors, like hover:bg-brand-500 and focus:text-error.

Conclusion

Expanding the color palette in Tailwind CSS is a simple process that allows you to maintain brand consistency and design systems across your projects. By defining and extending custom colors, you can ensure that your projects are both visually appealing and easy to maintain.