How to customise tailwind colors? A tailwind css tutorial

Tailwind colors are like a paint shop. There are so many color for you to building user interfaces. However you can create your own color also. Isn't cool? There are several ways we can customise colors in tailwind css. In this article we will learn how to customise tailwind colors. 

Using new colors

If you’d like to completely replace the default color palette with your own custom colors, add your colors directly under the theme.colors section of your tailwind.config.js file:

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'white': '#FEFEFE',
      'purple': '#403DC2',
      'black': '#101010',
    },
  },
}

By default, these colors will be will available everywhere in the framework where you use colors, like the text color utilities, border color utilities, background color utilities, and more.

Don’t forget to include values like transparent and currentColor if you want to use them in your project.

Using color object syntax

When your project's color palette includes multiple shades of the same color, You can group them using nested color object syntax.

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'white': '#ffffff',
      'pink': {
        100: '#FEF0FF',
        200: '#F9B4FD',
        300: '#F698FB',
        400: '#EC3DF5',
        500: '#EF1FF9',
        600: '#CA08D4',
        700: '#A70DAF',
        800: '#75107A',
        900: '#4A0F4D',
      },
      // ...
    },
  },
}

The nested color name will be combined with the parent key to form class names like `bg-pink-400`.

If you want to define a color name without any suffix, There is a the special DEFAULT key to use.

module.exports = {
  theme: {
    colors: {
      // ...
      'pink': {
        light: '#F698FB',
        DEFAULT: '#EF1FF9',
        dark: '#A70DAF',
      },
      // ...
    },
  },
}

This will generate classes like `bg-my-color`, `bg-my-color-light`, and `bg-my-color-dark`.

Using arbitrary values

Using Tailwind’s arbitrary value notation, you can generate a class for that color on-demand instead of adding it to your theme config file.

<button class="bg-[#1D8EF2] text-white ...">
  <svg><!-- ... --></svg>
  Share on Twitter
</button>

This is like inline styles, but you can combine it with interactive modifiers like hover and responsive modifiers like md:

By adding new colors

If you’d like to add a new color to the default palette, you can do it by the theme.extend.colors section of your tailwind.config.js file:

module.exports = {
  theme: {
    extend: {
      colors: {
        'my-color': {
          100: '#FEF0FF',
          200: '#F9B4FD',
          300: '#F698FB',
          400: '#EC3DF5',
          500: '#EF1FF9',
          600: '#CA08D4',
          700: '#A70DAF',
          800: '#75107A',
          900: '#4A0F4D',
        },
      }
    },
  },
}

This will generate class names like `bg-my-color-400`.

Naming your colors

Tailwind uses literal color names (like red, green, etc.) and a numeric scale (where 50 is light and 900 is dark) by default. But you can map them using abstract names like primary or danger.

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      primary: colors.indigo,
      secondary: colors.yellow,
      neutral: colors.gray,
    }
  }
}

Using CSS variables

If you’d like to define your colors as CSS variables, you can do this too in your tailwind css file.

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

@layer base {
  :root {
    --color-primary: 255 115 179;
    --color-secondary: 111 114 185;
    /* ... */
  }
}

Don’t include the color space function or opacity modifiers won’t work

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

@layer base {
  :root {
    --color-primary: rgb(255 115 179);
    --color-secondary: rgb(111 114 185);
    /* ... */
  }
}