Adding Colours To Tailwind CSS

Share:

Looking to add your own colour palette or brand colours?

To add your own colours to your Tailwind CSS config, you need to add your colour(s) to the theme.colors section of your Tailwind config as follows:

Option 1: Replace the default colour palette with your own

/* In your tailwind.config.js */

module.exports = {
  theme: {
    // Some useful comment
    color: {
        primary: "#FF69b4", // Can always use CSS variables too e.g. "var(--color-primary)",
        secondary: "#333333",
        brand: "#243c5a",
    },
  },
  variants: {
    // Some useful comment
  },
  plugins: [
    // Some useful comment
  ]
}

Option 2: Add it as additional colours to the default palette

/* In your tailwind.config.js */

module.exports = {
  theme: {
    // Some useful comment
    extend: {
        color: {
            primary: "#FF69b4", // Can always use CSS variables too e.g. "var(--color-primary)",
            secondary: "#333333",
            brand: "#243c5a",
        },
    },

  },
  variants: {
    // Some useful comment
  },
  plugins: [
    // Some useful comment
  ]
}

This will generate the following font-<WhateverYouNamedIt> utility which you can use within your page (e.g. add it to <html> or <body>).

/* Generated by Tailwind CSS in your css file */

.bg-primary {
  --bg-opacity: 1;
  background-color: #ff69b4;
  background-color: rgba(255, 105, 180, var(--bg-opacity));
}

.bg-secondary {
  --bg-opacity: 1;
  background-color: #333333;
  background-color: rgba(51, 51, 51, var(--bg-opacity));
}

.bg-brand {
  --bg-opacity: 1;
  background-color: #243c5a;
  background-color: rgba(36, 60, 90, var(--bg-opacity));
}

This will generate all of the other utilities which use the colours (e.g. Text, Border, Gradient)

Something wrong with the guide? Or any suggestions to make it better? Suggest an Edit.

Advertisment